Question

我的目标是让社交分享栏滚动页面从一个元素到另一个元素。您可以在此处查看我的进度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
    });
    }
 });
 });

Answer 1

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

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

Answer 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
            });
        }
    });
});

查看上面的新版本

限制滚动到元素jQuery

2 个答案: