添加和删除类的jQuery onscroll

Question

我需要在滚动添加一个“固定”类the header并删除它时，它的滚动备份在下面的脚本，但不知道如何最好地做到这一点：

<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; 
} 

想法表示赞赏。

Answer 1

我已经翻译了你的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; 
} 

Answer 2

添加/删除类方法很好。

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

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