javascript - jQuery scrolling DIV: stop scrolling when DIV reaches footer - Stack Overflow

admin管理员组

文章数量:1221252

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,

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,

• javascript
• jquery

Share Improve this question Follow asked Jan 24, 2012 at 14:40 turbonerdturbonerd 1,30655 gold badges3030 silver badges7272 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 16

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>

本文标签： javascriptjQuery scrolling DIV stop scrolling when DIV reaches footerStack Overflow