如何在滚动时修复导航栏

时间：2016-09-18 11:08:16

标签： javascript html css

好的，所以我想在顶部滚动修复导航栏，就像这个网站一样 - http://manipal.edu/ 好吧我知道，他们有很多类似的问题，但我无法在我的代码中应用它们。请帮忙

这是我的fiddle 

body {
  width: 100%;
  height: 100%;
  margin: 0px;
}
.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f2f2f2;
}
.navbar li {
  float: left;
}
li a,
.dropbtn {
  display: inline-block;
  color: #333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.navbar li a:hover,
.dropdown:hover .dropbtn {
  background-color: #333;
  color: #f2f2f2;
}
.navbar li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #333
}
.navbar .show {
  display: block;
}
.xavierslogo {
  width: 110px;
  height: 109px;
  margin-left: 20%;
}
.xavierstext {
  width: ;
  height: ;
  margin-left: 0%;
}
.topbg {
  background-color: #333;
}
<header class="topbg">
  <img src="xavierslogo.png" alt="St. Xavier's college logo" class="xavierslogo">
  <img src="xavierstext.png" alt="St. Xavier's college logo" class="xavierstext">
</header>


<ul class="navbar">
  <li><a href="#home">Home</a>
  </li>
  <li><a href="#news">Text one</a>
  </li>
  <li><a href="#news">Text Two</a>
  </li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown ▼</a>
    <div class="dropdown-content" id="myDropdown">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>

</ul>

<div class="main">


  z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>

</div>

1 个答案:

答案 0 :(得分：2)

试试这个...

您必须在此代码段中使用jQuery。

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(window).scrollTop() > $('header').height())
      $('.navbar').addClass('topNav');
    else
      $('.navbar').removeClass('topNav');
  });
});
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}
.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f2f2f2;
}
.navbar li {
  float: left;
}
li a,
.dropbtn {
  display: inline-block;
  color: #333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.navbar li a:hover,
.dropdown:hover .dropbtn {
  background-color: #333;
  color: #f2f2f2;
}
.navbar li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #333
}
.navbar .show {
  display: block;
}
.xavierslogo {
  width: 110px;
  height: 109px;
  margin-left: 20%;
}
.xavierstext {
  width: ;
  height: ;
  margin-left: 0%;
}
.topbg {
  background-color: #333;
}
.topNav {
  position: fixed;
  top: 0;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<header class="topbg">
  <img src="xavierslogo.png" alt="St. Xavier's college logo" class="xavierslogo">
  <img src="xavierstext.png" alt="St. Xavier's college logo" class="xavierstext">
</header>


<ul class="navbar">
  <li><a href="#home">Home</a>
  </li>
  <li><a href="#news">Text one</a>
  </li>
  <li><a href="#news">Text Two</a>
  </li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown ▼</a>
    <div class="dropdown-content" id="myDropdown">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>

</ul>

<div class="main">


  z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>z
  <br>

</div>

如果你想在普通/纯javascript中使用它

function topScrl() {
  if (document.getElementById('body1').scrollTop > document.getElementById('head1').clientHeight)
    document.getElementById('nav1').className = "topNav navbar";
  else
    document.getElementById('nav1').className = "navbar";
}
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}
.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f2f2f2;
}
.navbar li {
  float: left;
}
li a,
.dropbtn {
  display: inline-block;
  color: #333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.navbar li a:hover,
.dropdown:hover .dropbtn {
  background-color: #333;
  color: #f2f2f2;
}
.navbar li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #333
}
.navbar .show {
  display: block;
}
.xavierslogo {
  width: 110px;
  height: 109px;
  margin-left: 20%;
}
.xavierstext {
  width: ;
  height: ;
  margin-left: 0%;
}
.topbg {
  background-color: #333;
}
.topNav {
  position: fixed;
  top: 0;
  width: 100%;
}
<body id="body1" onscroll="topScrl()">
  <header id="head1" class="topbg">
    <img src="xavierslogo.png" alt="St. Xavier's college logo" class="xavierslogo">
    <img src="xavierstext.png" alt="St. Xavier's college logo" class="xavierstext">
  </header>


  <ul id="nav1" class="navbar">
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">Text one</a>
    </li>
    <li><a href="#news">Text Two</a>
    </li>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown ▼</a>
      <div class="dropdown-content" id="myDropdown">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </li>

  </ul>

  <div class="main">


    z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>z
    <br>

  </div>
</body>

相关问题
最新问题