0

我正在尝试为我的网页设置一个粘性导航栏，但我发现的内容有问题。也许有人可以帮助我？

“粘性位置”的想法是使网站上的元素粘住并保持可见。这些元素最初将位于它们的位置，然后在向下滚动网页的情况下，它们的位置将跟随滚动。

这是我所拥有的链接，它还显示了导航栏。

这是我尝试遵循的教程的链接

这是一些相关的CSS：

/* Navigation bar */
#navi {
height: 40px;
width: 961px;
background: #1e416f;
font-size: 14px;
color: white;
text-transform: uppercase;
margin: 0 0 20px 0;
}

以下是一些相关的 HTML：

<!-- NAVIGATION -->
 <div id="navi">
 <h1 class="logo"><a href="#">CAUL/CBUA</a></h1>

<ul id="primary-nav">
    <li><a href="#">Directories</a></li>
    <li><a href="#">Committees</a></li>
    <li><a href="#">Resources</a></li>
    <li><a href="#">About</a></li>
</ul>

<ul id="tools-nav">
    <li class="login"><a href="#">Log In</a></li>
    <li class="email icon"><a href="#">Email</a></li>
    <li class="twitter icon"><a href="#">Twitter</a></li>
    <li class="search icon"><a href="#">Search</a></li>
</ul>
</div>

我不会费心张贴我所拥有的，因为教程中根本没有太多内容。与您在该教程中看到的内容相比，我唯一改变的是它所说的nav我将其更改为navi因为那是我的 CSS 中的内容。

或者，如果有人有任何其他类似的想法，我愿意接受。

4

3 回答 3

1

jQuery 解决方案，在类之间切换，在您的站点中使用 CSS，几乎没有添加，这是一个 jsFiddle http://jsfiddle.net/mdesdev/AVUH4/

HTML

<div id="navi" class="default">

  <h1 class="logo"><a href="#">CAUL/CBUA</a></h1>

  <ul id="primary-nav">
    <li><a href="#">Directories</a></li>
    <li><a href="#">Committees</a></li>
    <li><a href="#">Resources</a></li>
    <li><a href="#">About</a></li>
  </ul>

  <ul id="tools-nav">
    <li class="login"><a href="#">Log In</a></li>
    <li class="email icon"><a href="#">Email</a></li>
    <li class="twitter icon"><a href="#">Twitter</a></li>
    <li class="search icon"><a href="#">Search</a></li>
  </ul>

</div>

CSS

#navi {
  height: 40px;
  width: 961px;
  background: #1e416f;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13px;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
}
#navi a:hover {
  background: white;
  color: #1e416f;
}
#navi .logo {
  margin: 0;
  padding: 0;
  float: left;
}
#navi .logo a {
  float: left;
  width: 56px;
  height: 40px;
  background: url(/imgs/navi/caul_white_nav.png) center no-repeat;
  text-indent: -9999px;
}
#navi .logo a:hover {
  background: url(/imgs/navi-hover/caul_blue_nav.png) center no-repeat;
  background-color: white;
}
#primary-nav, #tools-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
#primary-nav li, #primary-nav a, #tools-nav li, #tools-nav a {
  float: left;
}
#primary-nav a, #tools-nav a {
  color: white;
  text-decoration: none;
  padding: 0 10px;
  border-right: 1px solid white;
  line-height: 40px;
}
#tools-nav a:hover {
  color: #1e416f;
}
#primary-nav li:first-child a, #tools-nav li:first-child a {
  border-left: 1px solid white;
}
#tools-nav {
  float: right;
}
#tools-nav .icon a {
  text-indent: -9999px;
}
#tools-nav .email a {
  background: url(/imgs/navi/mail.png) no-repeat scroll center center transparent;
  width: 20px;
}
#tools-nav .email a:hover {
    background: url(/imgs/navi-hover/hover_mail.png) no-repeat scroll center center         transparent;
    width: 20px;
}
#tools-nav .twitter a {
    background: url(/imgs/navi/twitter.png) no-repeat scroll center center transparent;
    width: 20px;
}
#tools-nav .twitter a:hover {
    background: url(/imgs/navi-hover/hover-twitter.png) no-repeat scroll center center transparent;
    width: 20px;
}
#tools-nav .search a {
  background: url(/imgs/navi/search.png) no-repeat scroll center center transparent;
  width: 20px;
}
#tools-nav .search a:hover {
  background: url(/imgs/navi-hover/hover_search.png) no-repeat scroll center center transparent;
  width: 20px;
}
.default {
  margin: 0 0 20px 0;
}
.fixed {
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -480px;
}

jQuery

$(function() {

  var navi     = $( '#navi' ),
      naviOff  = navi.offset();

  $( window ).scroll(function() {

    if($( this ).scrollTop() >= naviOff.top + navi.height() && navi.hasClass( 'default' )) {

      navi.removeClass( 'default' ).addClass( 'fixed' ).fadeIn( 'fast' );
    } 
    else if($( this ).scrollTop() <= naviOff.top && navi.hasClass( 'fixed' )) {

      navi.removeClass( 'fixed' ).addClass( 'default' ).fadeIn( 'fast' );
    }

  });

});
于 2013-08-31T20:48:29.443 回答
1

jQuery Waypoints非常有用。

一旦导航栏到达页面顶部，您就可以使用导航栏。

$('#navi').waypoint('sticky');

在你的 CSS 中

#navi .stuck { position:fixed; }

应该做的伎俩！

于 2013-08-27T18:43:45.327 回答
0

您将需要添加如下内容：

#navi {
    position: fixed;
    top: 0px;
    left: 0px;
}
于 2013-08-27T18:39:13.740 回答