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;
}

提前非常感谢！

编辑： Codepen：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

导航栏顶部固定收缩与旋转木马没有重叠

1 个答案: