关于判断div是否到了顶部问题

Question

下面是一段判断div是否到达屏幕顶部，如果到了之后就fixed在顶部。问题：1.当div在顶部fixed住时，继续滚动会出现抖动现象2.有时候滚动时突然消失了，发现是scrollTop小于elementOffset导致得，但不知道怎么会出现得。（“anchorHead”是div得class名）$(window).on('scroll', function() {      var scrollTop = $(window).scrollTop();      var elementOffset = $('.anchorHead').offset().top;      // distance = (elementOffset - scrollTop);      console.log("e:"+elementOffset);      console.log("s:"+scrollTop);      $(".anchorHead").css('position',((scrollTop) >== elementOffset) ? 'fixed' : 'static').css("width","100%");       $(".anchorHead").css('top',((scrollTop) >= elementOffset) ? '0' : '');      $(".anchorHead").css('z-index',((scrollTop) > elementOffset) ? '9999' : '');  });

Answer 1

不要直接用css去控制它的位置, 用类名.

`
css:
div { 默认情况下就用文档流, 不需要 absolute } 
div.fixed { position:fixed; top:0; left:0; }

xxx.onscroll = function() {
if ( >= 顶部 ) { div.addClass('fixed'); }
else { < 顶部 ) { div.removeClass('fixed'); }; 
}
`

原理是 重复的class赋值不会引起渲染, 更不存在抖动
重复的改css则会立即渲染, 体现差异