, also habe ich eine Frage hier nach mehreren Stunden mit meinem Code nachfragen um Hilfe gebeten. Im Grunde wollte ich ein responsives Top-Menü erstellen, das auch festhielt, wenn man auf die Ebene runterscrollte, aber aus irgendeinem Grund scheint alles zu funktionieren, aber wenn die Fenstergröße kleiner als die minimale Breite war, um das volle Menü anzuzeigen, der Tropfen Das Menü, das aktiviert wird, funktioniert nur dann, wenn es noch oben war, und nicht einmal, wenn du daran vorbeigescrollt und es klebrig gemacht hast. Ich lerne gerade html5 und css, aber bin ziemlich unbekannt mit Javascript, also versuchte ich, Beispiele zu nehmen, die ich von Webseiten fand, die es erlaubten, ihren Code zu verwenden (im Grunde andere Tutorial-Webseiten), aber kein Glück hatte, aber endlich es funktioniert. Ich wollte es nur hier posten, falls es jemanden interessiert:Responsive Sticky-Menü funktioniert nicht nach Scroll
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>
Die jquery.min.js es sein muss, und konnte von here.
css heruntergeladen werden:
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;}
und der Index js Datei, die ich im Zusammenhang mit:
// 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";
}
}
Wenn jemand anderes mein Thema gefunden hat, weil sie ein ähnliches Problem hatten, hoffe ich, dass dies hilft. :-)
die Un-Required Absätze Verschlankung und Code, um es einfach zu machen. Wo Sie ein paar schnelle Antworten bekommen – Prasad
Prasad Hey, danke für die Antwort, ich wünschte, ich könnte, ich lerne, was ich konnte über CSS und HTML5, aber weiß nicht wirklich viel über JS, also habe ich wirklich keine Ahnung, was erforderlich ist oder was nicht ist. Ich hatte wirklich gehofft, dass derjenige, der mir helfen könnte, mir helfen könnte, das loszuwerden, was ich nicht brauche. – kenj45
Außerdem habe ich versucht, online nach der anderen Methode zu suchen, die kein Klonen erfordert. Das einzige Problem ist das Springen, wenn die Schriftrolle das Element erreicht, das ich kleben will, also springt der Rest der Seite hoch, aber ich fand eine einfache Lösung dafür, das Padding in den Hauptinhalt und einen negativen Rand von die gleiche Höhe auf dem klebrigen Element. Aber aus irgendeinem Grund folge ich der js von dieser Seite, die es funktioniert zeigt, aber ich kann es nicht zur Arbeit bringen ... Jeder kann mir bieten, was ich brauche? – kenj45