1

ビューポート内で垂直ナビゲーションバーを「スティッキー」に保つスクリプトアキュラススクリプトを見つけようとしています（またはスクリプトを作成します）。これは黒魔術ではないかもしれませんが（position：fixed cssを使用できます）、このアプローチには問題があります。ナビゲーションバーがビューポートの高さより長い場合、訪問者はナビゲーション全体を見ることができません。したがって、ナビゲーションバーの上部にビューポートを残さず、下部に親コンテナを残さないようにする必要があります。派手な/バウンドするアニメーションなしで、スクロールイベントを即座に追跡する必要があります。

それは可能ですか？グーグルは私に役立つものを何も明らかにしなかった。スラッシュドットの記事コメントナビゲーターまたはグーグルビデオのプレーヤーボックスからこの種の効果を知っているかもしれません。

更新：基本的に、これはjQueryプラグインscrollFollowの書き直しになります。アニメーションは使わないので、アニメーションがなくても問題ありません。ただし、クリッピングすることなく、定義された親コンテナ内にとどまることができるはずです。クッキーの取り扱いも必要ありません。

4

2 に答える 2

8

私はこれが本当に古いことを知っていますが、自分の解決策を見つけようとしているときにこれに出くわしました

このリンクは、本当に軽量な方法でそれを行う方法を示しています。基本的に必要なのは次のコードだけです (もちろんロードされた jQuery とともに)

$(function() {
    var $sidebar   = $("#siderbar"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

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

アニメーション化したくない場合は、アニメーション セクションを次のように置き換えます。

$sidebar.stop().animate({ marginTop: VALUE });

と

$sidebar.css("marginTop", VALUE);
于 2011-02-02T22:53:34.330 に答える
3

私はこの問題が古いことを知っていますが、スクロールのためにdivをページにとどめるためにGoogle検索で出てきました。このソリューションは非常にうまく機能し、上記の@Chrisのソリューションのように、私の状況ではページを無限にスクロールできませんでした。

<div id="sticky-anchor"></div> アンカーとして機能するために、フローティング div の上に空の div を追加する必要があります。

この例では、div にid="sticky"

解決策: http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html

Javascript:

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

CSS:

#sticky.stick {
    position: fixed;
    top: 0;
    z-index: 10000;
}
于 2013-07-02T14:54:05.970 に答える