2016-05-22 2 views
0

Я хочу получить этот эффект: www.kemtecnia.com Этот веб-сайт имеет фиксированную верхнюю панель, которая сжимается на прокрутке вниз, под карусели фиксированной, которая, кажется, исчезает по содержанию ниже.Навигационная верхняя фиксированная усадка с карусели без перекрытия

Как я могу это сделать в своем коде для его получения?

У меня есть NavBar верх:

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

спасибо заранее!

Edit: Codepen здесь: http://codepen.io/jesfer/pen/oLvQYY

ответ

0

не знаю, если это помогает ... но может быть то, что вы ищете, или по крайней мере подтолкнуть вас в правильном направлении.

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

+0

Спасибо за ваш ответ. Даже с вашей помощью не работает правильно. Я отредактировал сообщение с codepen. Единственное, что терпит неудачу, - это содержимое ниже, которое не перекрывает ползунок. – Jesfer

+1

все еще не на 100% уверен, что это то, чего вы пытаетесь достичь, взгляните на это, хотя? http://codepen.io/MatthewBryce/pen/KMKXOe?editors=0100 – MatthewBryce

+0

То есть! Большое спасибо за вашу помощь и извините за задержку в моем ответе. – Jesfer

 Смежные вопросы

  • Нет связанных вопросов^_^