0

スクロールを動かすと上下に動くメニューをやろうとしています。私はそれに近いですが、それが少しジャンプすると、メニュー（div右）の動きがスムーズではありません。改善方法知ってる人いますか？

(もちろん、水平方向に移動するべきではなく、左側のコンテンツとオーバーラップすることはできません。ここでライブの例を参照してください:http://jsfiddle.net/67ZFe/)

Jクエリ:

$(function(){

    $(document).scroll(function(){
        var windowTop = $(window).scrollTop();
        $('#right').css('margin-top', (windowTop)  + 'px'); 
    });

})

CSS:

body {background-color: #f2f2f2;font-size: 13px;margin: 0;padding: 0;}
#wrapper {position: relative; margin:0 auto;width:700px;height:900px;background-color:#fff;}
#right {
    position: absolute;
    top: 40px;
    right:0px;
    width:200px;
    height:200px;
    background-color: red;
}
#text {
    position: absolute;
    left: 0px;
    width:400px;
    padding:40px;
}

HTML:

<div id="wrapper">
  <div id="text"> </div>
  <div id="right"> </div>
</div>

ここに例があります：http://jsfiddle.net/67ZFe/

4

2 に答える 2

2

position:fixed;jQueryではなくcss属性を使用してこれを行う方が、より適切で高速な場合があります。

于 2012-11-22T16:08:06.803 に答える
0

何かが足りないかもしれませんが、要素を常に動かすよりも、固定位置の要素を使用する方が簡単ではないでしょうか。

要素が固定位置を使用する場合、その位置はページではなくブラウザウィンドウを基準にして決定されます。そのため、たとえばページをスクロールしても、メニューは常に上部に対して特定の位置に配置されます。

固定ポジショニングを使用すると、JavaScriptソリューションを使用するよりもはるかにスムーズになります。

私は次のようなものを使用します：

#right {
   position: fixed;
   top: 50px; /* Or whatever suits you */
}
于 2012-11-22T16:08:59.903 に答える