添加和刪除類的jQuery onscroll

我需要在滾動添加一個「固定」類the header並刪除它時，它的滾動備份在下面的腳本，但不知道如何最好地做到這一點：添加和刪除類的jQuery onscroll

<script> 
    $(document).ready(function() { 
     var div = $('.header'); 
     var div2 = $('.headerPlaceholder'); 
     var start = $(div).offset().top; 

     $.event.add(window, "scroll", function() { 
      var p = $(window).scrollTop(); 
      $(div).css('position', ((p) > start) ? 'fixed' : 'static'); 
      $(div).css('top', ((p) > start) ? '0px' : ''); 
      $(div2).css('display', ((p) > start) ? 'block' : 'none'); 
     }); 

    }); 
</script>

這會停止它在每次向下滾動後觸發事件，這與腳本中指定的CSS現在發生的情況相同，因此我需要添加一個類。

CSS：

.fixed { 
position: fixed; 
}

想法表示讚賞。

來源

2014-03-13 321

你已經走完了我最初的想法添加類。 – Huangism

我已經翻譯了你的JS用css與1類申請到身體

$(document).ready(function() { 
    var start = $('.header').offset().top; 

    $.event.add(window, "scroll", function() { 
     var p = $(window).scrollTop(); 
     if(p > start) { 
      $('body').addClass('fixed'); 
     } else { 
      $('body').removeClass('fixed'); 
     } 
    }); 
});

CSS

body.fixed .header { 
    position: fixed; 
    top: 0; 
} 
body.fixed .headerPlaceholder { 
    display: block; 
}

來源

2014-03-13 16:32:28 Huangism

哪些頁面可以檢查更新的代碼？ – Huangism

對不起，嘗試更新的答案 – Huangism

使用我現在有的答案，我希望這是你正在使用的測試頁，而不是一個面向公衆的頁面 – Huangism

添加/刪除類方法很好。

$(document).ready(function() { 
    $(window).scroll(function() { 
     if ($(this).scrollTop() > 100) { 
      $('.header').addClass("fixed"); 
     } else { 
      $('.header').removeClass("fixed"); 
     } 
    }); 
});

這裏是展示它是如何工作的小提琴：http://jsfiddle.net/gisheri/RpPEe/413/

來源

2014-03-13 16:28:49 Gisheri

添加和刪除類的jQuery onscroll

回答

相關問題