[英]Sticking nav to top of webpage on scroll not working
我正在嘗試將一些腳本應用於導航,我希望導航在滾動到頁面時粘在頁面頂部。 我知道這可以像我以前所做的那樣完成並且已經奏效。 然而這一次它不起作用。
我正在使用此代碼 - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky
該網站在這里 - http://www.mjlcarpentryltd.co.uk/
我不知道 javascript 是不是不工作/啟動,或者是否有其他樣式干擾某處。 任何幫助將不勝感激!
HTML
<div id="navbar">
<nav class="dropdownmenu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">ABOUT US</a></li>
<li>
<a href="#">SERVICES</a>
<ul id="submenu">
<li><a href="cutandpitchroofing.html">CUT AND PITCH ROOFING</a></li>
<li><a href="trussroofing.html">TRUSS ROOFING</a></li>
<li><a href="1stfixing.html">1ST FIXING</a></li>
<li><a href="2ndfixing.html">2ND FIXING</a></li>
<li><a href="cladding.html">CLADDING</a></li>
<li><a href="staircases.html">STAIRCASES</a></li>
</ul>
</li>
<li><a href="projects.html">PROJECTS</a></li>
<li><a href="testimonials.html">TESTIMONIALS</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="contact.html">CONTACT US</a></li>
</ul>
JS
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
CSS
.sticky {
position: fixed;
top: 0;
width: 100%;
}
nav {
display: block;
background-color: #76afdb;
width: 100%;
z-index: 99999999;
float: left;
position: relative;
}
您是否嘗試過使用 Foundation 的粘性功能? 需要更少的JS。 或者 Bootstrap 的位置粘性值? 這些都是使用導航欄執行所需操作的快速方法。 進一步解釋的兩個鏈接都在這里: https : //foundation.zurb.com/sites/docs/sticky.html https://getbootstrap.com/docs/4.0/utilities/position/
但是,如果您使用的是您提供的鏈接中的 CSS 和 JS:
CSS:
#navbar {
overflow: hidden;
background-color: #333;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: #4CAF50;
color: white;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
JS:
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
這應該有效,我自己測試過。 您的網站還使用了哪些其他 JS 代碼? 看不出它是否干擾了這個 JS 代碼。
這與之前的評論非常相似,根據滾動位置附加一個類 - 總是對我有用。
您的 jquery 將類似於以下內容
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > 170){
$('nav').addClass( "nav-fix-top");
}
else {
$('nav').removeClass( "nav-fix-top");
}
});
});
“nav-fix-top”類在它的 css 中有如下內容 -
position:fixed;
top:0;
left:0;
right:0;
margin:auto;
width:100%;
max-width:2000px
在您的特定情況下,問題似乎在於創建變量的范圍,這取決於您的設置。 如果您將創建變量的兩行移動到主函數中,以便它們在函數中是局部的,這應該可以工作:
window.onscroll = function() {myFunction()};
function myFunction() {
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.