粘性导航栏在 Firefox 中工作但不工作 Chrome

Question

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

向下滚动页面时，在导航栏应从 header 下方切换到固定在页面顶部的位置，它几乎总是会随着移动发生抖动。有时甚至闪烁。我能够复制的一些东西是：每当发生转变时，跳跃或闪光。如果直接滚动到更改点，则持续闪光灯闪烁。缓慢而持续的滚动将使页面向上跳动约 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 好好表现。

Answer 1

.navbar 应该是块，而不是 inline-block 并且 .navbar 中的 li 可以是 inline-block 而不需要 float。如果你照顾好它，似乎会奏效。

还稍微更改了您的代码以切换 class 而不是设置内联样式，但这对于在 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>

Answer 2

我快速浏览了一下，这似乎对我有用。我将在下面粘贴一个代码片段。我做的唯一改变是位置静态到绝对。

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

粘性导航栏在 Firefox 中工作但不工作 Chrome

Sticky Navbar Working in Firefox but not Chrome

html

css

navigation

jquery

navbar