javascript - 导航栏顶部固定收缩，带有无重叠的旋转木马

Question

我想得到这个效果:www.kemtecnia.com这个网站有一个固定顶部的导航栏，向下滚动时会缩小，下面有一个固定的旋转木马，它似乎被下面的内容消失了。

如何在我的代码中获取它？

我有导航栏顶部:

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Desplegar menú</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="logo" href="index.php">
            <img src="img/logo.gif" class="img-responsive" alt="DIESIA Networking Academic Program - UHU" />
        </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <?php
            $i = 0;
            foreach($menuItems as $menuItem => $url){
                if($i == 0 && (basename($_SERVER['PHP_SELF']) == 'index.php') || (basename($_SERVER['PHP_SELF']) == ''))
                    echo "<li class='active'>\n";
                else
                    echo "<li>\n";
                echo $url . $menuItem . "</a>\n";
                echo "</li>\n";
                $i++;
            }
            ?>
        </ul>
    </div>
</div>

但似乎与我的旋转木马重叠。导航栏也被 js 缩小了。我希望它不会与我的旋转木马重叠，并且滚动时旋转木马会与其余内容消失。

导航栏的 CSS:

@media(min-width:768px) {
.navbar-fixed-top {
    padding: 25px 0;
    -webkit-transition: padding .3s;
    -moz-transition: padding .3s;
    transition: padding .3s;
}

.navbar-fixed-top .navbar-brand {
    font-size: 2em;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

.navbar-fixed-top.navbar-shrink {
    padding: 10px 0;
}

.navbar-fixed-top.navbar-shrink .navbar-brand {
    font-size: 1.5em;
}
}
.navbar a:focus {
    outline: 0;
}

.navbar .navbar-nav {
    letter-spacing: 1px;
}

.navbar .navbar-nav li a:focus {
    outline: 0;
}

.navbar-default,
.navbar-inverse {
    border: 0;
}

提前致谢!

编辑:代码笔在这里:http://codepen.io/jesfer/pen/oLvQYY

Answer 1

不知道这是否有帮助...但可能是您正在寻找的东西，或者至少可以将您推向正确的方向。

http://codepen.io/MatthewBryce/pen/qZBPpp

HTML

 <div class="headerWrap">
    <div class="headerWrapContent">
      Title
    </div>
  </div>

  <div class="menuWrap">
    <div class="menuNavigationFloat">
      <a href="#">Home</a>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
    </div>
  </div>

    <div class="headerMast">
      This is a Header
    </div>

  <div class="contentWrap">
    <h1>Page Content Bit</h1>
    <p>A really simple sticky menu bar</p>
    <p>Lorem ipsum dolor sit amet,</p>
  </div>

</div><div class="wrap">

  <div class="headerWrap">
    <div class="headerWrapContent">
      Stupidly simple stick-on-scroll Menu
    </div>
  </div>

  <div class="menuWrap">
    <div class="menuNavigationFloat">
      <a href="#">Home</a>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
    </div>
  </div>

    <div class="headerMast">
      This is a Header
    </div>

  <div class="contentWrap">
    <h1>Page Content Bit</h1>
    <p>A really simple sticky menu bar</p>
    <p>Lorem ipsum dolor sit amet</p>
  </div>

</div>

CSS

body {
    color: #444;    
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
  margin: 0px;
  background: #222;
}

.headerMast {
  background: #AAA;
  min-height: 200px;
  max-height: 200px;
  margin-top: 0px;
  text-align: center;
  padding-top: 110px;
  color: #FFF;
   -webkit-transition: 1s; /* Safari */
  transition: 1s;
}

.headerMastAnim {
  margin-top: -300px;
  margin-bottom: 300px;
  -webkit-transition:  1s; /* Safari */
  transition: 1s;
}

.wrap {
    background: #444;
    overflow: auto;
}

.headerWrap {
  background: #222;
  font-size: 30px;
  height: 100px;
  line-height: 100px;
  font-weight: lighter;
  color: #CCC;
}

.headerWrapContent {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.menuWrap {
  background: RGBA(0,0,0,0.7);
  color: #fff;
  height: 55px;
  line-height: 60px;
  letter-spacing: 1px;
  width: 100%;
  margin-bottom: -55px;
  -webkit-transition: 0.4s; /* Safari */
  transition: 0.4s;
  z-index: 100;
  position: absolute;
}

.menuWrap.sticky {
  position: fixed;
  top: 0px;  
  height: 30px;  
  line-height: 30px;
  -webkit-transition: 0.4s; /* Safari */
  transition: 0.4s;
}

.menuNavigationFloat {
  background: RGBA(0,0,0,0.5);
  padding: 0px 20px;
    width: 80%;
  height: inherit;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  overflow: hidden;
}

.menuNavigationFloat a{
    list-style: none;
    color: #FFF;
    font-size: 16px;
    width: 170px;
  height: auto;
  margin-left: 0px;
  margin-right: 0px;
  padding-bottom: 2px;
    display: inline-block;
    text-align: center;
    text-transform: capitalize;
  text-decoration: none;
    transition: background 0.4s,  width 0.3s; 
}

.menuNavigationFloat a:hover{ 
    text-decoration: none;
    width: 200px;
    transition: background 0.4, width 0.3s;
}

.menuNavigationFloat  a:nth-child(1)         { background: #CC2222; }
.menuNavigationFloat  a:nth-child(1):hover { background: #FF3333; }


.contentWrap {
  background: #EEE;
  width: 80%;
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  margin-bottom: 80px;
  min-height: 1000px;
}

JS

    $(window).scroll(function() {
if ($(this).scrollTop() > 100) {  
    $('.menuWrap').addClass("sticky");
    $('.headerMast').addClass("headerMastAnim");
  }
  else{
    $('.menuWrap').removeClass("sticky");
    $('.headerMast').removeClass("headerMastAnim");

  }
});

http://codepen.io/MatthewBryce/pen/qZBPpp