Question

我一直在寻找这个问题的答案，我认为其他样式出了问题，但我在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表现出来。

Answer 1

.navbar应该是阻止，而不是inline-block而li中的.navbar只能是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>

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

Sticky Navbar在Firefox中工作但不在Chrome中工作

2 个答案: