滾動后響應式粘滯菜單不起作用
[英]Responsive sticky menu not working after scroll
問題描述
所以在弄亂我的代碼幾個小時后，我在這里發布了一個問題，尋求幫助。 基本上，我想制作一個響應式的頂部菜單，當您向下滾動到其級別時，它也會卡住，但是由於某種原因，一切似乎都可以正常工作，但是當將窗口的大小調整為小於最小寬度以顯示完整菜單時，向下激活的菜單僅在其仍在頂部時才起作用，而不是在您滾動過去使其變得粘滯時才起作用。 我目前正在學習html5和css，但對javascript不太熟悉，因此嘗試舉一些例子，我從允許您使用其代碼的網站（基本上是其他教程網站）上找到了，但是沒有任何運氣，但最終得到了它起作用。 我只是想在這里張貼它，以防有人感興趣：
的HTML：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="files/style01.css">
<title>This is my title</title>
</head>
<body>
<header>
<div class="logo">Logo place holder</div>
<div class="coverimage">Cover Image place holder</div>
<!-- Top menu is 44px in height -->
<div id="topmenu">
<ul class="topnav" id="myTopnav">
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Safety</a></li>
<li><a href="#">Contact</a></li>
<li class="contactright"><a class="contactright" href="#">Email Me: Text@email.com</a></li>
<li class="icon"><a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a></li>
</ul>
</div>
</header>
<div class="content">
<a href="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">Here</a>
Test
</div>
<script src="files/js/jquery.min.js"></script>
<script src="files/js/index.js"></script>
</body>
</html>
CSS：
body{
background-color: rgb(240,240,240);
font-family: Georgia, "Times New Roman", Times, serif;
font-color: rgb(0,0,0);
margin: 0;
}
ul.topnav{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(60,60,60);
}
ul.topnav li{float: left;}
ul.topnav li a{
display: inline-block;
color: rgb(250,250,250);
text-align: center;
padding: 2px 16px;
text-decoration: none;
transition: 0.2s;
font-size: 14px;
}
ul.topnav li.contactright{
float: right;
font-size: 15px;
color: rgb(200,200,200);
text-align: center;
padding: 0px 16px;
text-decoration: none;
transition: 0.2s;
}
ul.topnav li a:hover {background-color: rgb(100,100,100);}
ul.topnav li.icon {display: none;}
@media screen and (max-width:675px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:675px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* This is the class that will be added or removed based on the scroll position */
.fixednav{
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
.logo {font-size:40px; font-weight:bold;color:#00a; font-style:italic;}
.coverimage {color:#777; font-style:italic; margin:10px 0;}
#topmenu {background:#00a; color:#fff; height:40px; line-height:40px; letter-spacing:1px; width:100%; margin-bottom: -44px;}
.content {margin-top:10px; height: 20000px; padding-top: 54px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;}
.menu-padding {padding-top:40px;}
.content p {margin-bottom:20px;}
和我鏈接到的索引js文件：
// script for the sticky menu
var menu = document.querySelector('#topmenu');
var menuposition = menu.offsetTop;
stickMenu(menuposition);
jQuery(window).scroll(function () {
stickMenu(menuposition);
});
function stickMenu(menupos) {
if (jQuery(window).scrollTop() >= menupos) {
jQuery('#topmenu').addClass('fixednav');
} else {
jQuery('#topmenu').removeClass('fixednav');
}
}
// script for the responsive menu
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
如果其他人因為遇到類似問題而找到了我的主題，希望對您有所幫助。 :-)
1 個解決方案
解決方案1
0 2016-10-02 18:53:26
看起來jquery無法正常工作，我在關閉主體之前將jquery再次添加到文檔的末尾。
// script for the sticky menu var menu = document.querySelector('#topmenu'); var menuposition = menu.offsetTop; stickMenu(menuposition); jQuery(window).scroll(function () { stickMenu(menuposition); }); function stickMenu(menupos) { if (jQuery(window).scrollTop() >= menupos) { jQuery('#topmenu').addClass('fixednav'); } else { jQuery('#topmenu').removeClass('fixednav'); } } // script for the responsive menu function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } }
body{ background-color: rgb(240,240,240); font-family: Georgia, "Times New Roman", Times, serif; font-color: rgb(0,0,0); margin: 0; } ul.topnav{ list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: rgb(60,60,60); } ul.topnav li{float: left;} ul.topnav li a{ display: inline-block; color: rgb(250,250,250); text-align: center; padding: 2px 16px; text-decoration: none; transition: 0.2s; font-size: 14px; } ul.topnav li.contactright{ float: right; font-size: 15px; color: rgb(200,200,200); text-align: center; padding: 0px 16px; text-decoration: none; transition: 0.2s; } ul.topnav li a:hover {background-color: rgb(100,100,100);} ul.topnav li.icon {display: none;} @media screen and (max-width:675px) { ul.topnav li:not(:first-child) {display: none;} ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:675px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } /* This is the class that will be added or removed based on the scroll position */ .fixednav{ position: fixed; top: 0; width: 100%; z-index: 100; } .logo {font-size:40px; font-weight:bold;color:#00a; font-style:italic;} .coverimage {color:#777; font-style:italic; margin:10px 0;} #topmenu {background:#00a; color:#fff; height:40px; line-height:40px; letter-spacing:1px; width:100%; margin-bottom: -44px;} .content {margin-top:10px; height: 20000px; padding-top: 54px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;} .menu-padding {padding-top:40px;} .content p {margin-bottom:20px;}
<body> <header> <div class="logo">Logo place holder</div> <div class="coverimage">Cover Image place holder</div> <!-- Top menu is 44px in height --> <div id="topmenu"> <ul class="topnav" id="myTopnav"> <li><a class="active" href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">Safety</a></li> <li><a href="#">Contact</a></li> <li class="contactright"><a class="contactright" href="#">Email Me: Text@email.com</a></li> <li class="icon"><a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a></li> </ul> </div> </header> <div class="content"> <a href="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">Here</a> Test </div> <script src="files/js/jquery.min.js"></script> <script src="files/js/index.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> </body>
響應式和粘性頂部菜單沖突
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.