導航條沒有出現在滾動條上

我下載了他混合主題森林的響應式應用登陸頁面主題，我一直在做相當好的定製，直到我開始刪除不需要的部分。自刪除以來，標題不再像它應該顯示的那樣，隱藏在頁面加載中並出現在滾動中。導航條沒有出現在滾動條上

以下是它的用途：http://mixdesigns.net/themes/mix/HTML/right-mobile-layout/light/gray-bg/index.html。

我很確定它與JavaScript有關，但我在該領域的技能有限。

HTML：

<!-- Header --> 
     <header> 
      <nav class="navbar navbar-custom navbar-top navbar-fixed-top sticky-navigation" role="navigation"> 
       <div class="container-fluid"> 
        <a class="page-scroll btn-new btn-bold pull-right" href="#download">Download </a> 
        <div class="navbar-header page-scroll"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse"> 
          <i class="fa fa-bars"></i> 
         </button> 
         <!-- LOGO --> 
         <a class="navbar-brand nav-logo" href="#page-top"> 
          <img src="images/headerlogo.png" height="28" width="40" alt="mix"/> 
         </a> 
        </div> 
        <!-- NAVIGATION LINKS --> 
        <div class="collapse navbar-collapse navbar-right navbar-main-collapse"> 
         <ul class="nav navbar-nav"> 
          <li class="active"><a class="page-scroll" href="#page-top">Home</a></li> 
          <li><a class="page-scroll" href="#firstFeature">Features </a></li> 
          <li><a class="page-scroll" href="#team">Team</a></li> 
          <li><a class="page-scroll" href="#contact">Contact</a></li> 
         </ul> 
        </div><!-- /.navbar-collapse --> 

       </div><!-- /.container --> 
      </nav> 
     </header><!-- Header end -->

CSS：

/* Header and nav --------------------------------------------------- */ 
.sticky-navigation { 
    -webkit-transition: all .8s ease-in-out; 
    -moz-transition: all .8s ease-in-out; 
    -o-transition: all .8s ease-in-out; 
    transition: all .8s ease-in-out; 
    background: rgba(0, 0, 0, 0.8); 
    border: none; 
    border-bottom: 1px solid #222; 
    padding:5px 0 !important; 
    margin-bottom: 0 !important; 
    -webkit-backface-visibility: hidden; 
    top: -100px; 


} 
.nav-logo{ 
    padding: 0px 15px; 
    height: 50px; 
    margin-top: 15px; 
    overflow: hidden; 
} 
.nav-logo:focus{ 
    outline: none; 
} 
.navbar{ 
    margin-bottom: 0px; 
} 
.navbar-nav { 
    float: left; 
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
} 

.navbar-nav li a { 
    padding: 10px; 
    line-height: 30px; 
    font-size: 14px; 
    color: #aaa; 
    position: relative; 
    background: transparent !important; 
    font-weight: 700; 
    -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    transition: all .5s ease; 
} 
.navbar-nav li a:focus{ 
    outline: none; 
} 
.navbar-nav li.active a,.navbar-nav li a:hover { 
    color:#Eb2629; 
} 
header .btn-new{ 
    padding: 8px 18px; 
    font-size: 12px; 
    margin: 6px 0px 6px 10px; 
} 
.navbar-toggle{ 
    padding: 5px 10px; 
    margin-right: 10px; 
}

來源

2016-01-20 Stedman Cleveland

只是爲了清楚你想要它滾動後出現的權利？ –

您是否刪除了任何jQuery？你最終刪除了什麼？ –

請做一個jsfiddle演示... –

從我可以從它看起來像動畫代碼的鏈接講的是從這個插件

// Scroll Plugin 
$(window).scroll(function() { 
    var secondFeature = $('#secondFeature').offset().top; 
    var scroll = $(window).scrollTop(); 
    if (scroll >= 600) { 
     $('.sticky-navigation').animate({"top": '0', "opacity": '1'}, 0); 
    } else { 
     $('.sticky-navigation').animate({"top": '-100', "opacity": '0'}, 0); 
    } 
    if (scroll >= secondFeature - 200) { 
     $(".mobileScreen").css({'background-position': 'center top'}); 
    } 
    return false; 
});

基本上任何當滾動窗口達到600px以上時，它會將「粘滯導航」向下放置，反之則小於600px。

只要導航具有這應該工作的粘滯導航類。如果這不是你所需要的，請詳細說明。

來源

2016-01-20 21:00:49

導航條沒有出現在滾動條上

回答

相關問題