0
所以我在這裏發佈了一個問題後，我的代碼搞了幾個小時尋求幫助。基本上，我想製作一個響應式頂級菜單，當您向下滾動到其級別時也會卡住，但出於某種原因，所有內容都可以正常工作，但當窗口大小小於顯示完整菜單的最小寬度時，只有當它仍然處於頂層時纔會起作用，而不是一旦滾動過去並使其變得粘稠。我目前正在學習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: [email protected]</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>
的jquery.min.js需要存在，並且可以從here.
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";
}
}
如果有其他人發現我的話題，因爲他們有類似的問題，我希望這有助於。 :-)
修剪下來的未要求段落和代碼，使其簡單。你在哪裏得到一些快速的答案 – Prasad
Prasad嘿，謝謝你的回覆，我希望我可以，我正在學習我可以關於CSS和HTML5，但是對JS真的不太瞭解，所以我真的不知道需要什麼或者什麼不是。我真的希望在這裏能幫助我的人也能幫助我擺脫我不需要的東西。 – kenj45
此外，我試圖在網上查找如何編碼另一種不需要克隆的方法。這個唯一的問題是當滾動到達我想要粘貼的元素時的跳躍，所以頁面的其餘部分跳轉，但是我找到了一個簡單的解決方法，即在主內容中填充內容，粘性元素上的高度相同。但由於某種原因，我正在關注這個網站上的js，它顯示它正在工作，但我無法讓它工作......任何人都可以提供我所需要的東西？ – kenj45