javascript - 在滚动时将导航粘贴到网页顶部不起作用
问题描述
我正在尝试将一些脚本应用于导航,我希望导航在滚动到页面顶部时粘在页面顶部。我知道这可以像我以前做过的那样完成,而且效果很好。然而这一次它不起作用。
我正在使用此代码 - 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 代码。
推荐阅读
- swift - UIToolBar 设置 isEnabled 从其他 viewControllers
- c++ - getline 设置故障位以及 eof
- r - 如何使用 R 清洁城市和州(全称和缩写)
- reactjs - 如何整合外部反应
- java - java容器对象交换数组方法
- javascript - 我的两个 Jquery 脚本相互干扰
- python - Tensorflow seq2seq 聊天机器人总是给出相同的输出
- bash - 如何检查是否在 bash 中传入了空的命名参数?
- node.js - 完成从 express 中删除 api 后如何发出另一个 post 请求?
- gdb - 有和没有 GDB 的环境布局差异