如何摆脱这个页面闪烁？答案

【问题标题】：How to get rid of this page flickering?如何摆脱这个页面闪烁？
【发布时间】：2018-07-10 07:53:14
【问题描述】：

我正在做一个项目，jquery/js 为粘性菜单添加/删除类的逻辑存在问题，

示例页面： https://anish.kickpages.com/stickymenu/

尝试非常慢地滚动，您会注意到闪烁。

代码：

$(window).load(function() {
  var jsHeight = $('#section_o7kn8h_1531206224').parent().height(); 
  $('#section_o7kn8h_1531206224').parent().css('height', jsHeight);

  $('#section_o7kn8h_1531206224').parent().addClass('remove-jump');


  $(window).scroll(function(){
    if ($(window).scrollTop() >= 100) {
      $('#section_o7kn8h_1531206224').parent().css('height', 0);
      $('#section_o7kn8h_1531206224').addClass('fixed-header-top');
      $('#section_o7kn8h_1531206224').css('background', '');
    }
    else {
      $('#section_o7kn8h_1531206224').parent().css('height', jsHeight);
      $('#section_o7kn8h_1531206224').removeClass('fixed-header-top');
      $('#section_o7kn8h_1531206224').css('background', '');
    }
  });
});

【问题讨论】：

我通过评论解决了这个问题，$('#section_o7kn8h_1531206224').parent().css('height', 0); $('#section_o7kn8h_1531206224').parent().css('height', jsHeight);第一部分的行。

标签： javascript jquery sticky scrolltop

【解决方案1】：

访问了您的精彩页面并缓慢向下滚动，但根本看不到任何闪烁。我在 Ubuntu 18.04 上运行 Firefox。

编辑：无意将此作为答案发布

【讨论】：

使用 Chrome 我得到了闪烁。

【解决方案2】：

您可能希望将#section_o7kn8h_1531206224 放在一个固定高度的 div 中。

【讨论】：

谢谢，但这是不可能的，因为这个结构是从很久以前建立起来的，而且一切都是相互依赖的，如果我们可以采取一些措施来消除闪烁事件，那么就可以遵循相同的结构。

【解决方案3】：

$(window).scroll(function(){
    if ($(window).scrollTop() >= 100) {
        $('#section_o7kn8h_1531206224').parent().css('height', 0);
        $('#section_o7kn8h_1531206224').addClass('fixed-header-top');
        $('#section_o7kn8h_1531206224').css('background', '');
    }
    else {
        $('#section_o7kn8h_1531206224').parent().css('height', jsHeight);
        $('#section_o7kn8h_1531206224').removeClass('fixed-header-top');
        $('#section_o7kn8h_1531206224').css('background', '');
    }
});

可以去掉上面的，直接在html中将fixed-header-top类添加到#section_o7kn8h_1531206224。

【讨论】：

谢谢，但我们不能直接添加类，因为它不是静态页面，我们需要平滑的滚动渐变效果。这些页面将是动态的，任何部分都可以是粘性的，在滚动时我们需要平滑的淡入淡出效果 + 删除粘性 div + 没有跳转到粘性部分:)
你打算用上面的 sn-p 做什么？我看到闪烁发生是因为滚动事件被反复调用，并切换类“fixed-header-top”和父 div 的高度
在滚动顶部数量为 100 时，我想让我的一个部分在相反的动作中具有粘性和非粘性。由于位置从相对位置更改为固定位置，我们添加了高度以增加内容跳转的平滑度。