2

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の解決策はありますか?

みんな、ありがとう。

4

1 に答える 1