Question

我正在开发一个Wordpress主题，该主题具有粘性的移动导航栏。除了导航栏会抖动的iPhone以外，其他所有设备都可以正常工作，尤其是向上滚动时。

这是我原来的jQuery代码：

JS：

/* LOCK NAVIGATION TO TOP ON SCROLL */
jQuery(window).on("scroll", function(e) {
  jQuery('.fix_to_top').each(function(){
    var screenWidth = jQuery(window).width();
    var responsiveBreakpoint = jQuery(this).data('breakpoint');
    if(screenWidth <= responsiveBreakpoint){
        jQuery(this).removeClass("fixed");
    }else if(jQuery(window).scrollTop() > 0){
      var distanceFromTop = jQuery(this).offset().top - jQuery(window).scrollTop();
        jQuery(this).addClass("fixed");
      } else {
        jQuery(this).removeClass("fixed");
      }
    }else{
      jQuery(this).removeClass("fixed");
    }
  });
});

CSS：

.fix_to_top.fixed{
    position:fixed;
    width:100%;
    top:0;
    left:0;
    z-index:9999;
}

然后我阅读：Fixed nav flickers when scrolling

这导致我像上面这样更新上面的JS代码：

/* LOCK NAVIGATION TO TOP ON SCROLL */
jQuery(window).on("scroll", function(e) {
  jQuery('.fix_to_top').each(function(){
  var screenWidth = jQuery(window).width();
  var responsiveBreakpoint = jQuery(this).data('breakpoint');
  if(screenWidth <= responsiveBreakpoint){
      jQuery(this).removeClass("fixed");
  }else if(jQuery(window).scrollTop() > 0){
      var distanceFromTop = jQuery(this).offset().top - jQuery(window).scrollTop();
      if (distanceFromTop <= 0) {
        if ( jQuery(this).hasClass("fixed") ) {
          // DO NOTHING
        } else {
          jQuery(this).addClass("fixed");
        }
      } else {
        if ( jQuery(this).hasClass("fixed") ) {
          jQuery(this).removeClass("fixed");
        }
      }
    }else{
      if ( jQuery(this).hasClass("fixed") ) {
        jQuery(this).removeClass("fixed");
      }
    }
  });
});

因此，这里的想法是添加一个检查，以首先查看该类是否已经存在，然后再添加一个不存在的类（实际上，我的印象是“ .addClass”已经做了，但是很好。 ..），这样就不会在每个滚动实例上不断添加类，而我认为这会引起抖动。但是，这并不能解决问题。

还有其他想法吗？

修复了iPhone上滚动时的导航抖动

0 个答案: