Web サイトの左側に「固定」メニュー バーがあり、ユーザーがスクロールしたときにスクロール バーをページの下にたどりたいと考えています。これまでに 2 つのアプローチを試しました。1 つは css で、もう 1 つは jquery です。
1)私の最初の試みは、CSSスタイルの修正を使用することでした:
#leftframe {
position:fixed;
width: 200;
}
通常、これは垂直スクロールでうまく機能します。このソリューションの問題点は、ウィンドウの幅がそれほど広くなく、ユーザーがスクロールしようとすると、ページ コンテンツの上をスクロールしてしまうことです。
2) いくつかの調査の結果、スタック オーバーフローで説明されているように、要素を一方向に固定できる jquery アプローチがあることがわかりました: CSS: x 軸の固定位置ですが、y ではありませんか?
そこに概説されているアプローチを使用して、私はそれを行うためにこの素敵な小さな関数を書きました:
function float_vertical_scroll(id) {
$(window).scroll(function(){
$(id).css({
'top': $(this).scrollTop() //Use it later
});
});
}
ただ、問題は、Chrome と Safari でこれを試してみたところ、どちらも垂直スクロール中にメニュー バーのちらつきが目立つことです。メニューは非常に「ぎこちない」方法で移動しますが、css ソリューションはページをスムーズにスライドさせます。
なぜjqueryソリューションが途切れ途切れになっているのか、そしてそれについて何かできることがあれば誰か知っていますか? 私に「両方の長所」を与える第3の解決策はありますか?
みんな、ありがとう。