ScrollTop Javascript無法在Firefox中工作

我遇到問題，導航欄無法正確使用ScrollTop Javascript。它適用於Chrome和Safari，但不適用於Firefox。ScrollTop Javascript無法在Firefox中工作

這是我目前在網站上的所有代碼。導航欄位於頁面頂部時，我需要導航欄跟隨滾動。請在Firefox中查看，因爲這是我遇到問題的地方！

的Html

<body> 

    <div class="container"> 
    <nav class="bottom" id="nav"> 
     <div class="buttonWrapper"> 
     <a href="#about"> 
      <div class="navButton">About</div> 
     </a> 
     <a href="#designs"> 
      <div class="navButton">Designs</div> 
     </a> 
     <a href="#contact"> 
      <div class="navButton">Contact</div> 
     </a> 
     </div> 
    </nav> 
    <div class="largeLogo"></div> 
    </div> 
    <div class="container about" id="about"> 
    <div class="sideBar about"> 
     <div class="sidebarText"></div> 
     <p></p> 
    </div> 
    </div> 

    <div class="container designs" id="designs"> 
    <div class="view view-ninth"> 
     <img src="images/11.jpg" /> 
     <div class="mask mask-1"></div> 
     <div class="mask mask-2"></div> 
     <div class="content"> 
     <h2>Hover Style #9</h2> 
     <p>Some Text</p> 
     <a href="#" class="info">Read More</a> 
     </div> 
    </div> 
    <div class="sideBar designs"> 
     <div class="sidebarText"></div> 
    </div> 
    </div> 

    <div class="container contact" id="contact"> 
    <div class="sideBar contact"> 
     <div class="sidebarText"></div> 
    </div> 
    </div> 

</body>

的JavaScript

$(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 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 

window.addEventListener("scroll", navTop, false); 

function navTop() { 
    var nav = document.getElementById("nav"); 
    var about = document.getElementById("about").offsetTop - 1; 
    if (document.body.scrollTop > about) { 
    nav.className = "minimize"; 
    } else { 
    nav.className = "bottom"; 
    } 
}

Fiddle

來源

2016-02-26 Eddie Maiale

你在Firefox檢查控制檯。 –

問題是document.body.scrollTop。請嘗試使用下面的代碼：

function navTop() { 
    var nav = document.getElementById("nav"); 
    var about = document.getElementById("about").offsetTop - 1; 
    var scrollTop = $(document).scrollTop(); 
    if (scrollTop > about) { 
    nav.className = "minimize"; 
    } else { 
    nav.className = "bottom"; 
    } 
}

$(document).scrollTop();/$(window).scrollTop();同時適用於Firefox和Chrome

來源

2016-02-26 05:49:43 cracker

你是個天才！謝謝你，兄弟！！ –

@EddieMaiale :);） – cracker

ScrollTop Javascript無法在Firefox中工作

回答

相關問題