How to get rid of this page flickering?

问题: I am working on one project, have an issue with jquery/js logic of adding/removing class for sticky menu, Sample Page: https://anish.kickpages.com/stickymenu/ Try to sc...

问题:

I am working on one project, have an issue with jquery/js logic of adding/removing class for sticky menu,

Sample Page: https://anish.kickpages.com/stickymenu/

Try to scroll very slowing and you will notice flickering.

Code:

$(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', '');
    }
  });
});

回答1:

Visited your awesome page and scrolled down slowly, but could not see any flickering at all. I'm running Firefox on Ubuntu 18.04.

Edit: Did not mean to post this as an answer


回答2:

You might want to put #section_o7kn8h_1531206224 inside a div with a fixed height.


回答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', '');
    }
});

You can remove the above and directly add the fixed-header-top class to #section_o7kn8h_1531206224 in the html.

  • 发表于 2018-07-11 05:23
  • 阅读 ( 282 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除