3

このリンクをチェックするとhttp://jsfiddle.net/Hbkdt/。

$(window).scroll(function() {
       $(".fixed").css("top", $(window).scrollTop() + "px");
    });

スクローラーを下に移動します。次に、.fixed DIV が FF でスムーズに動作することを確認できますが、Safari と Webkit ではスムーズに動作しません。

どうすれば修正できるかわかりません。どんな助けでも大歓迎です:)

Mac で Chrome バージョン 22.0.1229.94 を使用しています。

4

4 に答える 4

2

を使用すると、ウィンドウの幅が要素の幅よりも小さい場合、右にスクロールして表示しようとしても、要素の一部が非表示になるため、要素を使用position: absoluteして設定するだけです。scrollTopposition: fixed

http://jsfiddle.net/Hbkdt/11/

この問題に取り組む別の方法は、に固執してposition: fixedから、要素の一部が隠されているという問題を解決することです。

http://jsfiddle.net/thirtydot/Hbkdt/26/

要素のleftプロパティは、水平スクロールが希望どおりに機能しているように見えるようにスクロールセットにあります。

$(window).scroll(function() {
    $(".fixed").css("left", -$(window).scrollLeft() + "px"); 
});

再び使用されているのでposition: fixed、縦スクロールは完全にスムーズです。

于 2012-11-08T11:04:28.597 に答える
1

私は代替案を提案しています。スムーズな効果を与えるための最も好ましいオプションは、位置の変化をアニメートして、イージングを偽造することです。

このようなもの

$(window).scroll(function(){
    $(".fixed").stop(false, true).animate({ "top" : $(window).scrollTop()}, 1000); 
});

デモ

これはうまく機能しますが、スクロールペインでスクロールを開始すると、再びどもり始めます。

ただし、これを克服するには、デバウンス手法を使用できます。

$(window).scroll(function(){
    $.doTimeout( 'scroll', 250, function(){
                         // ^ This time prevents the following code to run, 
                         //   if another scrolling occurs within this time

                         //   Thus enabling us to give a smooth scroll effect
                         //   Once the user is done scroll

        $(".fixed").stop(false, true) //break the queue fast
                   .animate({ "top" : $(window).scrollTop()}, 200);
    });
});

デモ

于 2012-11-05T04:13:22.517 に答える
1

固定 div 内に相対 div を追加し、サイズ変更時にその幅を調整します。

<div class="fixed">
    <div class="container">
         <ul>
            <li>Resize frame</li>
            <li>Test1</li>
            <li>Test1</li>
            <li>Test1</li>
        </ul>
        <div class="victim">Why i am not visible</div>
    </div>
</div>

</p>

js:

jQuery(document).ready(function($) {
    var fitWidth = function() {
        $(".fixed .container").width(Math.min(
            $(window).width(), $(".fixed").width()
        ));
    };

    $(window).resize(fitWidth);
    fitWidth();
});​

CSS:

.fixed {
    border:1px solid #ccc;
    position:fixed;
    top:0;
    left:0;
    width:1000px;
    background:red;
}

.container {
    background: #ff0;
    position: relative;
}

...

jsfiddle の 例

于 2012-11-06T18:16:03.670 に答える
0

あなたの場合、divをページの固定位置に固定するには、fixed代わりにCSS位置を使用する必要がありますabsolute

スクロール イベントは削除でき、CSS は次のようになります。

.fixed {
    padding:20px;
    border:1px solid #ccc;
    position:fixed;
    top:0;
    left:0;
}​

更新されたフィドルは次のとおりです。http://jsfiddle.net/Hbkdt/17/

于 2012-11-05T05:36:05.083 に答える