1

トップスティッキーメニューバーがあります。ページが1pxを超えてスクロールし始めたら、cssの変更をいくつか追加します。今はうまく機能していますが、スクロール位置が0のときに元に戻す必要があります。助けていただければ幸いです。ありがとう

これがjsです：

   $(document).scroll(function(){
if($(this).scrollTop() > 1)
{   
    $('.row-1').css({"box-shadow":"0 1px 3px rgba(0, 0, 0, 0.4)"});
 $('.row-1').css({"opacity":"0.9"});
}
});
4

2 に答える 2

7

CSS：

.row-1 { /* some styles for row 1 */ }
.row-1.scrolled { 
   box-shadow: 0 1px 3px rbga(0, 0, 0, 0.4);
   opacity: 0.9;
}

次に、そのスクロールクラスを切り替えるだけです。

 $(document).scroll(function(){
     $('.row-1').toggleClass('scrolled', $(this).scrollTop() > 1);
 });
于 2012-11-19T15:13:14.247 に答える
6

これを試して ：

$(document).scroll(function(){
    var row = $('.row-1'), scrollTop = $(this).scrollTop();
    if(scrollTop > 1)
    {   
        row .css({"box-shadow":"0 1px 3px rgba(0, 0, 0, 0.4)"});
        row .css({"opacity":"0.9"});
    }
    else if (scrollTop <= 1)
    {
        row.css({"box-shadow":"none"});
        row.css({"opacity":"1"});
    }
});

ただし、cssクラスを使用して、それを切り替える必要があります。DavidHedlundの応答のように。

于 2012-11-19T15:11:35.660 に答える