0

jquery.waypointsプラグインを使用すると、スティッキー要素を簡単に作成できます。そのスティッキー要素のデモは、デフォルトでページの上部の少し下に配置されているナビゲーションバーを示しています。その後、次の動作が行われます。a）ユーザーが下にスクロールし、ナビゲーションバーがビューポートの上部に当たると、そこに固定されます。b）ユーザーがページの一番上までスクロールして戻り、ナビゲーションバーは通常の位置に戻ります。

私は似たようなことをしようとしていますが、多少逆になっています。これは、scribdナビゲーションバーとまったく同じ効果です。このScribdページの一番下から始めて、ゆっくりと上にスクロールして効果を確認します。

これはどのように行われますか？私はウェイポイントがそれを容易にするだろうと思います。ありがとう。

4

1 に答える 1

0

これが私が理解した解決策ですが、それでも他の実装に興味があります。

js：

//#bottomOfEl is the element you want to stick to the bottom of
$("#bottomOfEl").waypoint(function(ev, dir){ 
    $("#navbar").toggleClass('sticky', dir === "up");
    ev.stopPropagation();
}, {
    offset: function() {return $.waypoints('viewportHeight') 
                                - $(this).height() 
                                - $("#navbar").height();
            } 
})

css：

#navbar {
    height: 40px;
    width: 500px;
    z-index: 10;
}
.sticky { 
    position: fixed;
    bottom: 0px;
}
于 2011-12-13T10:09:58.917 に答える