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

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

Home Forums Support How do I make my right sidebar sticky for all browsers?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1543203
    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 🙂

    #1543212
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

    #1543222
    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

    #1543241
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1543259
    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

    #1543262
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1543265
    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?

    #1543289
    Elvin
    Staff
    Customer Support

    Try this out:

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

    A wise man once said:
    "Have you cleared your cache?"

    #1543357
    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

    #1543371
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1543506
    Andy

    Makes sense. Thanks for your help Elvin!

    #1544970
    Elvin
    Staff
    Customer Support

    No problem. Glad to be of any help. 🙂

    A wise man once said:
    "Have you cleared your cache?"

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.