限制滚动到元素jQuery答案

【问题标题】：Limit scroll to element jQuery限制滚动到元素jQuery
【发布时间】：2012-08-15 18:54:17
【问题描述】：

我的目标是让社交分享栏随着页面从一个元素滚动到另一个元素。你可以在这里看到我的进步http://ossian.statenews.com/~matt/statenews-redesign/docs/article.html。现在元素一直滚动到底部，我想滚动到“相关故事”的顶部。这是我的 jQuery：........

$(document).ready(function() {
 var $sidebar   = $("#sharebox"),
 $window    = $(window),
 offset     = $sidebar.offset(),
 topPadding = 50;

 $window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
        $sidebar.stop().animate({
        marginTop: $window.scrollTop() - offset.top + topPadding  
        });
    } else {
    $sidebar.stop().animate({
    marginTop: 0
    });
    }
 });
 });

【问题讨论】：

标签： jquery scroll limit

【解决方案1】：

您的if 语句只检查window 滚动顶部，您也应该检查.related-stories。

if ($window.scrollTop() > offset.top && $window.scrollTop() < $('.related-storie').scrollTop()) {
    $sidebar.stop().animate({
        marginTop: $window.scrollTop() - offset.top + topPadding  
    });
}

【讨论】：

谢谢。你能举个例子说明我将如何包含这个吗？

【解决方案2】：

如果你使用块的固定位置会更好的用户体验，比如

$(document).ready(function() {
    var $sidebar   = $("#sharebox"),
    $window    = $(window),
    offset     = $sidebar.offset(),
    topPadding = 50,
    $leadStory  = $('.leadstory');
    $relatedStories  = $('.related-stories');

    $sidebar.css({
        position : 'fixed',
        'margin-left' : 0,
        left : offset.left,
        top : offset.top
    });

    var criteria = $relatedStories.offset().top - $sidebar.height();
    $window.scroll(function() {
        if ($window.scrollTop() > criteria) {
            $sidebar.css({
                top : offset.top - ($window.scrollTop() - criteria)
            });
        } else {
            $sidebar.css({
                top : offset.top
            });
        }
    });
});

查看上面的新版本

【讨论】：

我应用了这个，当我滚动过去时它似乎消失了，然后当我滚动回顶部时重新出现。
查看上面的新版本
嗯，这似乎只是使元素固定，而不是随页面滚动。
是的，页面在该元素下滚动，直到到达相关故事块。