CODEWITHSUNDEEP
htmlcssbootstrap-4
Valery Bulash
Valery Bulash

Reputation: 413

Why sticky sidebar not floating

Here is a sample where I take the affix for the right sidebar (unfortunately, Bootstrap 4 hasn't true affixes) - Violy Theme Right Sidebar Sample I see that sticky behavior made by this style:

.sidebar {
    border-radius: 20px;
    padding: 25px 25px;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

So, when I duplicate sticky behavior in CSS for my page here - nothing happened, right sidebar scrolled with text :-( What's wrong?

Guess, written text is not enough to provide a clear answer, so, please look into browser Developer Tools for these pages to inspect styles and elements.

Upvotes: 0

Views: 1043

Answers (2)

avia
avia

Reputation: 1568

UPDATE: Please see @despotes quick fix, that preserves the use of sticky positioning on the page.

I will leave my fixed positioning solution as a reference for future users.

Using fixed positioning that is more evenly supported:

CSS

.sidebar {
  position:fixed;
  top:425px;
}

jQuery

$(document).ready(function(){      
      $(window).scroll(function() { 
        if ($(document).scrollTop() > XX) { //value to be determined
          $('.sidebar').css('top','25';
          }
        if ($(document).scrollTop() < XX) { // same value but add 1
          $('.sidebar').css('top','425';
        }
      });
      
});

So basically once the user scrolls past XX, the sidebar will sit 25px below the top of the screen and when under XX it will sit at 425px from the top. Could be edited with more trigger points for smoother effect.

Upvotes: 1

despotes
despotes

Reputation: 411

That can happen for many reasons: Position sticky will most probably not work if overflow is set to hidden, scroll, or auto on any of the parents of the element.

In fact, in your site I found that its parent element:

<header id="head_page">...</header>
<section class="wrapper>
<!--- here we find the sidebar -->
</section>
<footer id="footer>...<footer>

has a overflow: hidden; property and when I disabled it the property of position: sticky; started working again.

Upvotes: 4

Related Questions