在 jsfiddle 上工作的粘性导航栏，但在 localhost 上不如预期

Question

我已经组合了一个sticky navbar，它出现在相对位置 10 像素之后，然后在滚动超过 offset().top 时变为固定。 这在小提琴上可以按需要工作，但是在 localhost（使用完全相同的代码）上，导航栏一出现就固定了（它应该相对定位到偏移点，如小提琴所示）。

希望了解它为何在 localhost 上表现不同？

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

这是我从 localhost 运行的 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>

Answer 1

尝试将 <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'});
      }
    }
  });
});