0

私の目標は、ある要素から別の要素へとページをスクロールするソーシャル シェア バーを作成することです。ここで私の進捗状況を確認できます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
    });
    }
 });
 });
4

2 に答える 2

0

ブロックの固定位置を使用すると、ユーザー エクスペリエンスが大幅に向上します。

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

上記の新しいバージョンをチェックしてください

于 2012-08-15T19:23:31.317 に答える
0

あなたのifステートメントはスクロールトップのみをチェックします。windowあなたもチェックする必要があり.related-storiesます。

if ($window.scrollTop() > offset.top && $window.scrollTop() < $('.related-storie').scrollTop()) {
    $sidebar.stop().animate({
        marginTop: $window.scrollTop() - offset.top + topPadding  
    });
}
于 2012-08-15T19:03:00.713 に答える