Remove Scroll Fixed from sidebar

Asked

Viewed 519 times

1

I have this code that when the scroll moves it fixes the sidebar in the top, until then it is correct now I need that when the sidebar approaches the footer, be applied a scroll bottom, or something of the type so that it accompanies the footer. 

    <script>
      jQuery(window).scroll(function () {
      var threshold = 20;
      if (jQuery(window).scrollTop() >= 20)
      jQuery('.sidebar').addClass('fixed');
    else
      jQuery('.sidebar').removeClass('fixed');
    });
    </script>
jquery rolling sidebar

  • For the menu and the footer to clash is because one or both of them are using too much space... Why do a scroll on one of them and have scroll on the page will get kind of weird for the user.

  • Sergio is the following, I have the menu in the normal header when the scroll is triggered it fixed at the top, and this sidebar fixes right down the menu, but when it arrives at the end of the page, the footer overrides the sidebar,( what I want that. )

1 answer

1


If you want to do the sidebar follow the limit of footer You need to know a few more parameters/measures to do some math. I leave an example below. Ideally it should have out of function everything that is static. That is everything that has fixed measures:

var sidebar = jQuery('.sidebar');
var alturaFooter = jQuery('#footer').height();
var alturaPagina = jQuery('#pagina').height();
var alturaSidebar = sidebar.height();

So no need to re-calculate this each time the scroll is called.

Example: http://jsfiddle.net/3ucuvvrm/

HTML

<div id="pagina">
    <header>Cabeçalho</header>
    <div class="sidebar">Sidebar</div>
    <footer>Footer</footer>
</div>

jQuery

var sidebar = jQuery('.sidebar');
var header = jQuery('header').height();
var alturaFooter = jQuery('footer').height();
var alturaPagina = jQuery('#pagina').height();
var alturaSidebar = sidebar.height();

jQuery(window).scroll(function () {

    // colar o sidebar
    var threshold = 20;
    var scroll = jQuery(window).scrollTop();
    if (scroll >= header) sidebar.addClass('fixed');
    else sidebar.removeClass('fixed');

    // seguir o footer
    if (scroll + alturaSidebar > alturaPagina - alturaFooter) sidebar.css('top', alturaPagina - scroll - alturaSidebar - alturaFooter);
    else sidebar.css('top', 0);

});

  • Give a look how it works, I’ll leave the link to understand better, this sidebar exists only in the pages thermotelha and themjet http://thermotelha.wpengine.com/thermotelha/

Browser other questions tagged jquery rolling sidebar

You are not signed in. Login or sign up in order to post.