- This topic has 11 replies, 2 voices, and was last updated 3 years, 5 months ago by Elvin.
-
AuthorPosts
-
November 23, 2020 at 3:31 pm #1543203Andy
Hi there,
I searched the forums and applied this code for right sidebar sticky:
@media (min-width: 769px) { #right-sidebar { position: -webkit-sticky; position: sticky; top: 0; } }
Unfortunately, it doesn’t work with all browsers.
Question: Is there a code I can apply to make my right bar sticky for all browsers? Or, am I required to use a third-party plugin?
Thank you!
p.s. Please don’t accidentally click the Ad in my sidebar haha 🙂
November 23, 2020 at 3:46 pm #1543212ElvinStaffCustomer SupportHi,
Can you specify which browser is having issues?
You may have to add
-moz-position:
and-ms-position:
.Also, can you change this
position: -webkit-sticky;
to this-webkit-position: sticky;
.November 23, 2020 at 4:00 pm #1543222AndyHi Elvin,
Sounds good — new code:
@media (min-width: 769px) { #right-sidebar { -webkit-position: sticky; position: sticky; top: 0; } }
It seems to work on all browsers except Internet Explorer. What are your thoughts?
Thank you
November 23, 2020 at 4:14 pm #1543241ElvinStaffCustomer SupportIt seems to work on all browsers except Internet Explorer. What are your thoughts?
Ah, I was expecting this.
Unfortunately, Internet Explorer doesn’t support
position: sticky;
.
https://developer.mozilla.org/en-US/docs/Web/CSS/positionThe workaround to achieve the same functionality is to write a script that toggles between
position:fixed;
andposition:relative;
depending on whichever element you want the “sticky” element to “stick” on.Tip: If you’re keen on doing this, you’ll most likely need some sort of “is in viewport” check for your script.
November 23, 2020 at 4:37 pm #1543259AndyHi Elvin,
Thank you —
1. Check out the website labeled under ‘Private Information.’ It’s wordpress too. Are you able to see what they’re using for their sidebar sticky?
2. I’m assuming I’ll need to hire a developer for writing the script you suggested, correct? If so, what kind of programming knowledge should they have (php)? Sorry, this is outside my expertise.
Thank you
November 23, 2020 at 4:51 pm #1543262ElvinStaffCustomer Support1. Check out the website labeled under ‘Private Information.’ It’s wordpress too. Are you able to see what they’re using for their sidebar sticky?
It’s using CSS property
position: fixed;
. Doesn’t seem to be using a script that toggles it.You can actually just use
position: fixed;
rather than “sticky” if you just want the sidebar to stay fixed to a certain spot of the viewport when you browse.Sticky is used when you want an element to sticky to another element when it eventually bumps it when you’re scrolling.
2. I’m assuming I’ll need to hire a developer for writing the script you suggested, correct? If so, what kind of programming knowledge should they have (php)? Sorry, this is outside my expertise.
You can hire one, or learn to do it yourself. 🙂
This is a front-end kind of web development so its mainly JavaScript/jQuery + CSS.
November 23, 2020 at 4:53 pm #1543265AndyYou can actually just use position: fixed; rather than “sticky” if you just want the sidebar to stay fixed to a certain spot of the viewport when you browse.
That’s all I really need :). So what does the final code look like?
@media (min-width: 769px) { #right-sidebar { -webkit-position: fixed; position: fixed; top: 0; } }
How does this look?
November 23, 2020 at 5:29 pm #1543289ElvinStaffCustomer SupportTry this out:
@media (min-width: 769px){ #right-sidebar { -webkit-position: relative; position: relative; height: inherit; } .inside-right-sidebar { position: fixed; } }
November 23, 2020 at 7:05 pm #1543357AndyPerfect Elvin! Thank you!
Just one last question: Why is there a large gap at the top here? How do I move this sidebar up more (during scroll)?
November 23, 2020 at 7:24 pm #1543371ElvinStaffCustomer SupportJust one last question: Why is there a large gap at the top here? How do I move this sidebar up more (during scroll)?
Ah right, that’s because I’ve slightly changed how the previous sticky works. I’ve made fixed relative to its container so you don’t have to worry about setting
top:
andleft:/right:
.If you check your reference site(nickiswift), it behaves the exact same way. Except your site’s header folds in, making the gap more obvious.
If you want the gap reduced, making the sidebar move up when the header folds in, then you’ll definitely need the
position:sticky;
OR a custom script that toggles positioning when scrolling.November 23, 2020 at 10:11 pm #1543506AndyMakes sense. Thanks for your help Elvin!
November 24, 2020 at 11:35 am #1544970ElvinStaffCustomer SupportNo problem. Glad to be of any help. 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.