粘性导航栏在 jsfiddle 上工作，但在本地主机上不符合预期

Sticky navbar working on jsfiddle, but not as expected on localhost

本文关键字：主机 不符合 工作 导航 jsfiddle      更新时间：2023-09-26

我把一个粘性导航栏放在一起，该导航栏出现在 10px 之后的相对位置，然后在滚动超过 offset().top 后变得固定。这在小提琴上按预期工作，但在 localhost（具有完全相同的代码）上，导航栏一出现就会固定（它应该相对定位到偏移点，如小提琴所示）。

希望了解为什么它在本地主机上的行为不同？

另外，我添加了jquery（<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>），并且没有控制台错误。

这是我从本地主机运行它的 javascript：

<script type="text/javascript">
  document.getElementById('navig').style.visibility = 'hidden';
  var fixed = false;
  var topTrigger = $('#navig').offset().top;
  $(window).scroll(function () {
    if ($(this).scrollTop() > 10) {
      document.getElementById('arr_downpoint').style.visibility = 'hidden';
      document.getElementById('navig').style.visibility = 'visible';   
    }
    else {
      document.getElementById('arr_downpoint').style.visibility = 'visible';
      document.getElementById('navig').style.visibility = 'hidden';
    }    
  });
  $(document).scroll(function() {
    if( $(this).scrollTop() >= topTrigger ) {
      if( !fixed ) {
        fixed = true;
        $('#navig').css({'position':'fixed', 'top':'0'});
      }
    } else {
      if( fixed ) {
        fixed = false;
        $('#navig').css({'position':'relative'});
      }
    }
  });
</script>

尝试将 <script> 标签中的所有内容包装到$(document).ready()函数中：

$(function () {
  document.getElementById('navig').style.visibility = 'hidden';
  var fixed = false;
  var topTrigger = $('#navig').offset().top;
  $(window).scroll(function () {
    if ($(this).scrollTop() > 10) {
      document.getElementById('arr_downpoint').style.visibility = 'hidden';
      document.getElementById('navig').style.visibility = 'visible';   
    }
    else {
      document.getElementById('arr_downpoint').style.visibility = 'visible';
      document.getElementById('navig').style.visibility = 'hidden';
    }   
  });
  $(document).scroll(function() {
    if( $(this).scrollTop() >= topTrigger ) {
      if( !fixed ) {
        fixed = true;
        $('#navig').css({'position':'fixed', 'top':'0'});
      }
    } else {
      if( fixed ) {
        fixed = false;
        $('#navig').css({'position':'relative'});
      }
    }
  });
});
相关文章：