2

ユーザーがスクロールアウトする必要がある場合でも、要素を常に表示したままにします。

1) On Body Load                     2) After scrolling down
-------------------------           -------------------------
                                     ____________
                                    |            |
                                    |            |
                                    |            |
                                    |            |
                                    |____________|

 ____________
|            |
|            |
|            |
|            |
|____________|

基本的に、要素の位置が上から 20px 未満の場合は要素の位置を固定に変更し (2)、上から 20px を超える場合は要素の位置を静的に戻します (1)。

EG のようなトリックを行うプラグインがあります: http://www.vertstudios.com/blog/demo/stickyscroller/demo.php。

要素が上部にあるときに起動するリスナーと、要素から離れたときに起動するリスナーを作成するにはどうすればよいですか?

4

1 に答える 1

0

そのクラスを修正するには、1 つの css クラスとルールが必要です。クラスが適用されていない場合、通常の css は絶対に設定されます

 var $div = $('#mydiv');
$(window).on('scroll', function() {       
      var  changeClass = false,
        is_fixed = $div.hasClass('fixedClass');

    if ($(this).scrollTop() > 20) {
        changeClass = is_fixed ? false : true;
    } else {
        changeClass = is_fixed ? true : false;
    }
    if (changeClass) {
        $div.toggleClass('fixedClass');
    }

})

より短いコードでこれを記述できますが、スクロールすると 1 秒間に何度もイベントがトリガーされるため、クラスが既に存在するかどうかを確認すると、余分な DOM 操作が大幅に削減されます

于 2012-06-19T05:04:35.753 に答える