HTML，JS：滾動到不可靠與崩潰導航欄

我正在一個網站上的導航欄崩潰，併成爲不透明的向下滾動的網站上工作。這導致了一個問題，點擊頁面上div的鏈接會導致該div的頂部轉到頁面的頂部，而不是導航欄的底部。該網站的網址是rewindrl.uk。有什麼方法可以抵消頁面頂部的div滾動，以便它很好地排列起來，或者以其他方式「預測」，並在向下滾動時考慮導航欄的高度？完整的來源是github.com/rewindrl/rewindrl.github.io，因爲該網站託管在GitHub頁面上。HTML，JS：滾動到不可靠與崩潰導航欄

導航代碼：

<div id="sticky-anchor"></div> 
<nav id="tf-menu" class="navbar navbar-default"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand logo" href="#tf-home" style="padding:0px"><img itemprop="image" src="/img/Rewind Transparent.png" width=50 height=50 alt="Rewind Gaming Logo"></img></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"> 
      <li><a href="#tf-home">Home</a></li> 
      <li><a href="/apply">Apply</a></li> 
       <li><a href="/signup">Tournaments</a></li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav>

導航CSS：

#tf-menu { 
margin-bottom: 0; 
background: transparent; 
border: 0; 
color: #fff !important; 
padding: 2% 0; 
transition: all 0.5s; 
} 
#sticky { 
    padding: 0.5ex; 
    background-color: #333; 
    color: #fff; 
    font-size: 2em; 
    border-radius: 0.5ex; 
} 
#tf-menu.stick { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 10000; 
    background: #222222; 
    padding: 1% 0; 
} 
#tf-menu.navbar-default .navbar-nav > li > a { 
    color: #C5C5C5; 
    text-transform: uppercase; 
    font-size: 12px; 
    font-weight: 700; 
    letter-spacing: 1px; 
} 

#tf-menu.navbar-default .navbar-nav > li > a:hover, 
#tf-menu.navbar-default .navbar-nav > li > a:focus { 
    color: #00D2FF; 
    background-color: transparent; 
}

滾動JS：

function main() { 

(function() { 
    'use strict'; 

    /*==================================== 
    Main Navigation Stick to Top when Scroll 
    ======================================*/ 
    function sticky_relocate() { 
     var window_top = $(window).scrollTop(); 
     var div_top = $('#sticky-anchor').offset().top; 
     if (window_top > div_top) { 
      $('#tf-menu').addClass('stick'); 
     } else { 
      $('#tf-menu').removeClass('stick'); 
     } 
    } 

    $(function() { 
     $(window).scroll(sticky_relocate); 
     sticky_relocate(); 
    }); 


$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top - 70 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 
}()); 
} 
main();

我沒有與JS太多的經驗，和我使用的是CSS模板，所以當向我解釋我是多麼愚蠢的時候，請不要過於深入！由於提前，

bucketman

來源

2017-06-02 bucketman

我不能嘗試，但我認爲，如果你設置scrollTop: target.offset().top - 70像scrollTop: target.offset().top - 120一個較高的值會有所幫助。

那- 70是導航條。它已經是一個偏移量70px

試試看;）

來源

2017-06-02 10:30:31

好的，我會給它一個去！謝謝！ – bucketman

是的，我設法通過將偏移量設置爲175來解決它。非常感謝！ :) – bucketman

這不是問題！ :) –

HTML，JS：滾動到不可靠與崩潰導航欄

回答

相關問題