Sticky Navbar 适用于 Firefox 但不适用于 Chrome答案

【问题标题】：Sticky Navbar Working in Firefox but not ChromeSticky Navbar 适用于 Firefox 但不适用于 Chrome
【发布时间】：2017-07-28 07:07:50
【问题描述】：

我整天都在寻找这个问题的答案，我认为其他样式有问题，但我拥有的所有代码在 Firefox 中都能完美运行，但在 Chrome 中会发生一些奇怪的事情。

向下滚动页面时，在导航栏应该从标题下方切换到页面顶部的位置处，它几乎总是会随着移动发生而抖动。有时甚至会闪烁。我能够复制的一些东西是：转变发生时的跳跃或闪光。如果直接滚动到更改点，则会持续闪烁。缓慢而持续的滚动会使页面向上跳跃约 5%。

这是我的代码。

HTML

 <!DOCTYPE html>

<html>
    <head>
        <meta content="en-us" http-equiv="Content-Language" />
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <meta name="viewport" content="width=device-width, user-scalable=no" />

        <title>NMU - SCA</title>

        <link rel="stylesheet" href="css/desktop.css">
        <link rel="stylesheet" href="css/mobile.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="header">
            <h1>Student Cybersecurity Association</h1>
            <h2>of Northern Michigan University</h2>
        </div>
        <div class="navbar">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="index.html">Information</a></li>
                <li><a href="index.html">Contact</a></li>
            </ul>
        </div>
        <div>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
            <p>a</p>
        </div>

        <script type="text/javascript" src="js/main.js"></script>
    </body>
</html>

CSS

* {
    margin: 0px;
    padding: 0px;
}

html, body {
    height:100%
}

#header {
    padding: 20%;
    background-color: black;
}

#header h1, #header h2 {
    text-align: center;
    color: white;
}

.navbar {
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 0px;
    margin: 0px;
    background-color: red;
    z-index: 100;
    top: 0;
    left: 0;
}

.navbar ul {
    padding: 0px;
    margin: 0px;
}

.navbar li {
    display: inline-block;
    float: left;
    padding: 15px;
    background-color: red;
}

.navbar a {
    text-decoration: none;
    color: white;
}

jQuery

var main = function() {

  $(window).scroll(function() {
     var scrollVal = $(this).scrollTop();
      if ( scrollVal >= $('#header').outerHeight(true)) {
          $('.navbar').css({'position':'fixed','top' :'0px'});
      } else {
          $('.navbar').css({'position':'static','top':'auto'});
      }
  });
}

$(document).ready(main);

我真的厌倦了这个问题，只想让 Chrome 正常运行。

【问题讨论】：

我在 Windows 10 上使用 Chrome 版本 56.0.2924.87（64 位），但没有看到您所指的问题。也许是您使用的浏览器？当页面滚动并且导航离开时，我看到了平滑的过渡。
我收回了。使用鼠标上的滚轮时有一个平滑的过渡，但当我使用浏览器上的滚动条时没有。

标签： jquery html css navigation navbar

【解决方案1】：

我快速浏览了一下，这似乎对我有用。我将在下面粘贴一个代码 sn-p。我所做的唯一更改是将静态位置更改为绝对位置。

var main = function() {
    $(window).scroll(function() {
        var scrollVal = $(this).scrollTop();
        if ( scrollVal >= $('#header').outerHeight(true)) {
            $('.navbar').css({'position':'fixed','top' :'0px'});
        } else {
            $('.navbar').css({'position':'absolute','top':'auto'});
        }
    });
}

【讨论】：

你就是炸弹。

【解决方案2】：

.navbar 应该是块，而不是 inline-block 并且 .navbar 中的 li 可以只是 inline-block 并且不需要 float。如果您照顾好它，似乎可以工作。

还稍微更改了代码以切换类而不是设置内联样式，但这对于在 chrome 中进行此工作不是必需的。

$(window).scroll(function() {
  var scrollVal = $(this).scrollTop(),
      $header = $('#header'),
      $navbar = $('.navbar');
  if (scrollVal >= $header.outerHeight(true)) {
    $navbar.addClass("fixed");
  } else {
    $navbar.removeClass("fixed");
  }
});

* {
  margin: 0px;
  padding: 0px;
}

html,
body {
  height: 100%
}

#header {
  padding: 20%;
  background-color: black;
}

#header h1,
#header h2 {
  text-align: center;
  color: white;
}

.navbar {
  position: relative;
  background-color: red;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
}

.fixed {
  position: fixed;
}

.navbar ul {
  padding: 0px;
  margin: 0px;
}

.navbar li {
  display: inline-block;
  padding: 15px;
  background-color: red;
}

.navbar a {
  text-decoration: none;
  color: white;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="header">
  <h1>Student Cybersecurity Association</h1>
  <h2>of Northern Michigan University</h2>
</div>
<div class="navbar">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">Information</a></li>
    <li><a href="index.html">Contact</a></li>
  </ul>
</div>
<div>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
</div>

【讨论】：

如果我可以选择两个答案，我会在这里，因为你的答案与另一个答案一致实际上是让这一切不再有趣的原因。非常感谢您的回复！
@WolfNinja2 np :)