关于判断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 }&nbsp;div.fixed { position:fixed; top:0; left:0; }xxx.onscroll = function() {if ( >= 顶部 ) { div.addClass('fixed'); }else { < 顶部 ) { div.removeClass('fixed'); };&nbsp;}`原理是 重复的class赋值不会引起渲染, 更不存在抖动重复的改css则会立即渲染, 体现差异