0

こんにちは、スクロール時に固定位置を持つdivを作成していますが、高さが小さい場合は機能しますが、高さが大きくなるとページをスクロールできなくなり、何が問題なのかわかりません。そのためのjsfiddleを作成しましたここを見て

ライブデモ

コードは

var div = $('.PropertyContainer');
    var start = $(div).offset().top;

    $.event.add(window, "scroll", function () {
        var p = $(window).scrollTop();
        var height = $(div).height();
        $(div).css('position', ((p) > start) ? 'fixed' : 'static');
        $(div).css('top', ((p) > start) ? '0px' : '');
        $(div).css('min-height', ((p) > start) ? '336px' : '70%');
        $('.FormWrapper').css('margin-left', ((p) > start) ? '181px' : '');
    });

私を助けてください 2 日が経過していますが、私はそれに取り組んでいますが、何も成し遂げられませんでした

前もって感謝します

4

2 に答える 2

1

この問題は、PropertyContainerの高さが原因で発生します。これはページで最大の要素であるため、垂直スクロールバーを定義します。

しかし、スクロールを開始すると、位置を「固定」に変更します。その時点で、PropertyContainerの高さはページの全体の高さとしてカウントされなくなり、ページが垂直方向に縮小され、スクロールバーがすぐに消えます。

そして、無限ループに陥ります。

スクロールバーが消える > scrollmount=0 > 位置が再び静的に変わる > ページが高くなる > スクロールバーが再び表示される > ...

考えられる解決策:

PropertyContainerがページの高さを定義しないようにFormwrapperを高くすると、スクリプトが機能します。

http://jsfiddle.net/willemvb/CdpeK/

于 2012-10-10T11:53:48.203 に答える
0

代わりに使用して要素を固定配置しようとしましたか? これは JavaScript よりも優れて高速に動作するはずですが、モバイル デバイスをターゲットにしている場合、このオプションは論外です (モバイル デバイスはまだ固定位置をサポートしていません。少なくとも古いバージョンの Android と iPhone はサポートしていません)。

于 2012-10-10T10:32:54.403 に答える