jQuery-让一个元素在div中向下滚动一页

Question

到目前为止，我有以下代码：

HTML

<div id="header"></div>
<div id="content">
    <div class="sidebar-wrapper"></div>
</div>
<div class="session-wrapper"></div>
<div id="footer"></div>

CSS

#header {
  height: 600px;
  width: 100%;
  background: black;
}
#content {
  height: 2000px;
  width: 100%;
  background: #eeeeee;
}
.sidebar-wrapper {
    width: 350px;
    height: 350px; /*depends on content*/
    background: rgba(0,0,0,0.2);
    border-radius: 20px;
    padding: 20px;
    margin-top: 50px;
}
.session-wrapper {
  height: 200px;
  width: 100%;
  background: #000000;
}
#footer {
  width: 100%;
  height: 500px;
  background: #888;
}

jQuery

jQuery(window).scroll(function(e){ 
var sidebar = jQuery('.sidebar-wrapper');
var sessions = jQuery('.session-wrapper');
var scrollTop     = jQuery(window).scrollTop(),
    elementOffset = sidebar.offset().top,
    distance      = (elementOffset - scrollTop),
    sessionOffset = sessions.offset().top;
var isPositionFixed = (sidebar.css('position') == 'fixed');
    if(distance < 60 && (sessionOffset - elementOffset) > 800 && !isPositionFixed) { 
            sidebar.css({'position': 'fixed', 'top': '100px', 'width': '350px'}); 
    }
    if((sessionOffset - elementOffset) < 800 && isPositionFixed || scrollTop > 1900) {
            sidebar.css({'position': 'static', 'top': '0px', 'width': '100%'}); 
    }
});

参见JSFIDDLE

基本上，我试图实现的是，灰色框（sidebar-wrapper）和你一起向下滚动页面，直到它离.sessions-wrapper大约20像素，一旦它离开20像素，我就试图让它保持在这个位置，直到你向上滚动，它会和你一起向上滚动直到它到达顶部，直到它到达原始位置。我想我快到了，但我需要一些帮助才能让它发挥作用。。。

提前感谢！

Answer 1

您可以使用各种技术对此进行归档。新的position:sticky属性实现了类似的结果：

#sidebar-wrapper{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    bottom: 0px;
    line-height: 30px;
    background: gray;
}

请参见此处：http://jsfiddle.net/4hznD/

但我认为你所看到的与此类似：http://jsfiddle.net/FDv2J/4/（摘自：jQuery滚动DIV：当DIV到达页脚时停止滚动）

你可以使用类似的代码（你应该调整它）：

$(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"
            });
        }
    });
});

希望它能有所帮助！