更新

Question

我尝试使用“position：fixed”但是当我向下滚动时，导航栏会越过身体。滚动时我希望导航栏和主体分开当我向下滚动时，如何使导航栏在顶部透明并使其变暗。

<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">

ws2.Range("A2:C2", Range("A2:C2").End(xlDown)).Copy

Answer 1

我可以看到你正在使用bootstrap框架。因此，您可以尝试使用顶部的固定导航栏。

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

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

我的答案是导航栏位置修复。

Answer 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 PART

    <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 CLASS

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

更新

尝试这一个 JQUERY

<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 Class

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

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

滚动时如何将导航栏固定在顶部？

2 个答案:

JQUERY PART

添加CSS CLASS

更新

CSS Class