Question

我试图创建一个粘性导航栏，每次添加.fixed css时它都会闪烁。我找到了其他人使用过的解决方案，包括添加overflow:auto和transform:translateZ(0)。这似乎都不适合我。

<script>

$(document).ready(function(){
  $(window).on("scroll", function(){
    stickyNav();
  });
});

function stickyNav() {
   var navHeight = menu_offset = $('.main-menu').offset().top;
         if ($(window).scrollTop() > navHeight) {
             $('nav').addClass('fixed');
         }
         else {
             $('nav').removeClass('fixed');
         }
}

<nav class="main-menu"> content </nav>

.fixed {
position: fixed; 
top: 0; 
overflow:hidden;}

任何帮助将不胜感激

编辑1：

我做了一个JSFiddle Here 它现在不再工作了。我无法弄清楚原因。

Answer 1

您必须在使用前缓存所有已使用的元素！或者jquery总是通过选择器找到元素作为新变量。

// variables
var mainDocument = $(document);
var stickyNav    = $('nav');
var etc.....

// function definitions
............

// using all
............

Javascript粘性导航闪烁

1 个答案: