[Resolved] How do I make my right sidebar sticky for all browsers?

[Andy]

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 🙂

[Elvin]

Hi,

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;.

[Andy]

Hi 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

[Elvin]

It 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/position

The workaround to achieve the same functionality is to write a script that toggles between position:fixed; and position: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.

[Andy]

Hi 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

[Elvin]

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?

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.

[Andy]

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.

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?

[Elvin]

Try this out:

@media (min-width: 769px){
#right-sidebar {
    -webkit-position: relative;
    position: relative;
    height: inherit;
}
.inside-right-sidebar {
    position: fixed;
}
}

[Andy]

Perfect 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)?

View post on imgur.com

[Elvin]

Just 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: and left:/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.

[Andy]

Makes sense. Thanks for your help Elvin!

[Elvin]

No problem. Glad to be of any help. 🙂

[Author]

Posts