【问题标题】：How do I keep my navigation bar fixed on top while scrolling?滚动时如何将导航栏固定在顶部？
【发布时间】：2016-08-07 05:54:59
【问题描述】：

我尝试使用“位置：固定”，但是当我向下滚动时，导航栏会出现在身体上方。我希望导航栏和正文在滚动时分开以及如何使导航栏在顶部透明并在向下滚动时使其变暗。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav{
	background-color: #000;
	text-align: center;
	padding: 8px;
}

nav li{
display: inline-block;
margin: 5px 40px 5px 40px;
padding: 3px;
font-size: 40px;
}
body{
	padding: 16px;
	margin: 10px;
	background-color: #FFE4C4;
}
nav li a{
	color: white;
	text-decoration: none;
	font-family: sans-serif;

<head>
<title>Nikola tesla</title>
</head>
<body>
 <div id="header">
  <nav>
   <ul>
    <li><a href="#early">Early Life</a></li>
    <li><a href="#achieve">Achievements</a></li>
    <li><a href="#quote">Quotes</a></li>
   </ul>
  </nav>
 </div>
 <img src="https://s20.postimg.org/o8qt69nyl/nikolatesla.jpg" class="img-responsive .img-rounded center-block" alt="Nikola Tesla" title="Nikola Tesla">
<div class="row"><h1 id="early">Early life</h1>
<div class="col-md-8 col-lg-8 col-sm-12 col-xs-12">

【问题讨论】：

给出你的完整代码。以便我们快速测试。

标签： html css twitter-bootstrap-3

【解决方案1】：

我可以看到您正在使用引导框架。所以你可以试试这个固定在顶部的导航栏。

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
       ...
      </div>
    </nav>

有关引导导航栏的更多信息，请访问：- https://getbootstrap.com/components/#navbar-fixed-top

我的答案是定位导航栏。

【讨论】：

【解决方案2】：

只要加上jquery，就可以达到你想要的输出了。

<head>
<title>Nikola tesla</title>

<style type="text/css">

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav{
    background-color: #000;
    text-align: center;
    padding: 8px;
}

nav li{
display: inline-block;
margin: 5px 40px 5px 40px;
padding: 3px;
font-size: 40px;
}
body{
    padding: 16px;
    margin: 10px;
    background-color: #FFE4C4;
}
nav li a{
    color: white;
    text-decoration: none;
    font-family: sans-serif;
}

.paragraph{
text-align:justify;
}

.top-nav-collapse {
  background: white;
  padding: 0;
}
</style>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>

$(window).scroll(function() {
  if ($(".navbar").offset().top > 50) {
    $(".navbar-fixed-top").removeClass("top-nav-collapse");
  } else {
    $(".navbar-fixed-top").addClass("top-nav-collapse");
  }
});

</script>

</head>
<body>
 <div id="header">
  <nav class="navbar navbar-fixed-top">
   <ul>
    <li><a href="#early">Early Life</a></li>
    <li><a href="#achieve">Achievements</a></li>
    <li><a href="#quote">Quotes</a></li>
   </ul>
  </nav>
 </div>
 <img src="https://s20.postimg.org/o8qt69nyl/nikolatesla.jpg" class="img-responsive .img-rounded center-block" alt="Nikola Tesla" title="Nikola Tesla">
<div class="row"><h1 id="early">Early life</h1>
<div class="col-md-8 col-lg-8 col-sm-12 col-xs-12 paragraph">

Nikola Tesla (Serbian Cyrillic: Никола Тесла; 10 July 1856 – 7 January 1943) was a Serbian American[3][4][5][6] inventor, electrical engineer, mechanical engineer, physicist, and futurist best known for his contributions to the design of the modern alternating current (AC) electricity supply system.[7]

Tesla gained experience in telephony and electrical engineering before emigrating to the United States in 1884 to work for Thomas Edison in New York City. He soon struck out on his own with financial backers, setting up laboratories and companies to develop a range of electrical devices. His patented AC induction motor and transformer were licensed by George Westinghouse, who also hired Tesla for a short time as a consultant. His work in the formative years of electric-power development was involved in a corporate alternating current/direct current "War of Currents" as well as various patent battles. He became a naturalized US citizen in 1891.[8]

Tesla went on to pursue his ideas of wireless lighting and electricity distribution in his high-voltage, high-frequency power experiments in New York and Colorado Springs and made early (1893) pronouncements on the possibility of wireless communication with his devices. He tried to put these ideas to practical use in an ill-fated attempt at intercontinental wireless transmission, his unfinished Wardenclyffe Tower project.[9] In his lab, he also conducted a range of experiments with mechanical oscillators/generators, electrical discharge tubes, and early X-ray imaging. He also built a wireless controlled boat, one of the first ever exhibited.
</div>
</div>
</body>
</html>

JQUERY 部分

    <script>

    $(window).scroll(function() {
      if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
      } else {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
      }
    });

    </script>

添加的 CSS 类

.top-nav-collapse {
      background: white;
      padding: 0;
    }

更新

试试这个查询

<script>

$(window).scroll(function() {
  if ($(".navbar").offset().top > 50) {
    $(".navbar-fixed-top").removeClass("top-nav-collapse").fadeTo(50,0.8);
  } else {
    $(".navbar-fixed-top").addClass("top-nav-collapse").fadeTo(50,0.4);
  }
});

</script>

使用fadeTo(speed,opacity)

CSS 类

 .top-nav-collapse {
      padding: 0; 
}

您可以使用两种给定技术中的任何一种。

【讨论】：