[英]ScrollTop Javascript is not working in Firefox
我的導航欄無法與ScrollTop Javascript一起正常工作。 它適用於Chrome和Safari,但不適用於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";
}
}
問題出在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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.