Question

160

jQuery scrolling DIV: stop scrolling when DIV reaches footer

rated 0 times [ 167] [ 7] / answers: 1 / hits: 30098 / 13 Years ago, tue, january 24, 2012, 12:00:00

I have a #sidebar (which starts below my #header div) and a #footer (around 120px off the bottom of the page).

I'm trying to make the sidebar scroll with the content of the page. The code below does this semi-successfully:

/* profile sidebar */

#sidebar>div{ width: 300px; margin-top: 10px; }

#sidebar.fixed>div{position:fixed;top:0;}

#sidebar.fixed_bottom>div{position:fixed;bottom:172px;}



jQuery(function ($) {

    $.fn.scrollBottom = function() { 

        return $(document).height() - this.scrollTop() - this.height(); 

    };



    var el = $('#sidebar'),

    pos = el.position().top;



    $(window).scroll(function() {

        if ($(this).scrollTop() >= pos) {

            if ( $(this).scrollBottom() <= 172 ) { 

                el.removeClass('fixed');

                el.addClass('fixed_bottom');

            } else { 

                el.removeClass('fixed_bottom');

                el.addClass('fixed');

            }

        } else {

            el.removeClass('fixed');

        }

    });

});

The problem is, on smaller resolutions, this makes the sidebar jump once you reach a certain position on the page. It stops it from overlapping the footer (which is the problem if you remove the fixed_bottom class) but doesn't look good.

What I'd like to do is this: user scrolls to the bottom of the page, the sidebar scrolls along with the content until it reaches say 20px above the top of my footer, at which point it stays there until the user scrolls back up.

Thanks in advance,

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

andrea

Add To Favorites

Follow

Total Points: 445

Total Questions: 95

Total Answers: 103

Location: Tonga

Member since Tue, Nov 30, 2021

3 Years ago

answered 13 Years ago aileent · Accepted Answer

I believe this should do what you want.

http://jsfiddle.net/FDv2J/3/

#sidebar>div{ width: 100px; margin-top: 10px; position:fixed; left: 0; top: 0;}

$(function() {

    $.fn.scrollBottom = function() {

        return $(document).height() - this.scrollTop() - this.height();

    };



    var $el = $('#sidebar>div');

    var $window = $(window);



    $window.bind(scroll resize, function() {

        var gap = $window.height() - $el.height() - 10;

        var visibleFoot = 172 - $window.scrollBottom();

        var scrollTop = $window.scrollTop()



        if(scrollTop < 172 + 10){

            $el.css({

                top: (172 - scrollTop) + px,

                bottom: auto

            });

        }else if (visibleFoot > gap) {

            $el.css({

                top: auto,

                bottom: visibleFoot + px

            });

        } else {

            $el.css({

                top: 0,

                bottom: auto

            });

        }

    });

});

I tried to break things up and name variables in such a way that it would be understandable. Let me know if there's anything you're unsure of. Notice that I added resize as well as scroll since it matters if the window changes size.

EDIT: Modified version using similar technique to the original to find the upper bound:

http://jsfiddle.net/FDv2J/4/

$(function() {

  $.fn.scrollBottom = function() {

    return $(document).height() - this.scrollTop() - this.height();

  };



  var $el = $('#sidebar>div');

  var $window = $(window);

  var top = $el.parent().position().top;



  $window.bind(scroll resize, function() {

    var gap = $window.height() - $el.height() - 10;

    var visibleFoot = 172 - $window.scrollBottom();

    var scrollTop = $window.scrollTop()



    if (scrollTop < top + 10) {

      $el.css({

        top: (top - scrollTop) + px,

        bottom: auto

      });

    } else if (visibleFoot > gap) {

      $el.css({

        top: auto,

        bottom: visibleFoot + px

      });

    } else {

      $el.css({

        top: 0,

        bottom: auto

      });

    }

  }).scroll();

});

body{

  margin: 0;

}

#sidebar>div {

  width: 100px;

  height: 300px;

  margin-top: 10px;

  background-color: blue;

  position: fixed;

}

#stuff {

  height: 1000px;

  width: 300px;

  background-image: url(http://placekitten.com/100/100)

}

#footer,

#header {

  height: 172px;

  width: 300px;

  background-color: yellow;

}

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>



<div id=header></div>



<div id=sidebar>

  <div class=fixed>sidebar</div>

</div>



<div id=stuff>



</div>



<div id=footer>



</div>