我有以下html文档，其中我尝试将我的网站的顶部栏（包含navopener的导航栏，在左侧打开菜单）粘贴，以便在滚动时始终保持在顶部。但是，相反的效果是正确的：当滚动时，它就会消失。我怎样才能解决这个问题？注意：我对Javascript / Css / Html不太满意。
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../stylesheet.css">
<script src="../javascript/sidenav.js"></script>
<title>Apple</title>
</head>
<body>
<!-- Navigation -->
<div id="sidenav_left" class="sidenav">
<a href="javascript:void(0)" class="closer" onclick="closeNav()">×</a>
<a href="../index.html">Zurück zur Startseite</a>
<a href="google.html">Google</a>
<a href="facebook.html">Facebook</a>
<a href="amazon.html">Amazon</a>
<a href="apple.html">Apple</a>
<a href="kommentar.html">Kommentar</a>
<a href="abwaegung.html">Wer ist mächtiger?</a>
<a href="urteil.html">Urteil</a>
<a href="quellen.html">Quellen</a>
<a href="quellenreflexion.html">Quellenreflexion</a>
</div>
<div id="navbar">
<span class="navOpener" onclick="openNav()"> ☰</span>
</div>
<div id="main">
<img class="complogo" src="../img/apple.jpg" alt="Apple-Logo">
<div class="textbox">
<h1>Apple</h1>
<p>Apple Inc. ist ein US-amerikanisches Technologieunternehmen mit Sitz in Cupertino. Das Unternehmen entwickelt und vertreibt Computer, Smartphones, Unterhaltungselektronik sowie Betriebssysteme und Anwendungssoftware. Es zählt außerdem zu den ersten Herstellern von Personal Computern.</p>
<p>Apple wurde 1976 von Steve Wozniak, Steve Jobs und Ron Wayne in einer Garage gegründet. Das Startkapital Apples lag bei 1300 US-Dollar. Als Idee zur Firmengründung diente der Computer von Steve Wozniak als Basis und war gleichzeitig das erste Produkt der Firma. Steve Jobs galt als die treibende Kraft hinter der Unternehmensgründung. Wozniak musste angeblich erst überzeugt werden, die Spezifikationen des Apple I nicht kostenlos an seinen damaligen Arbeitgeber zu übergeben. Der heute weitgehend in Vergessen geratene Ronald Wayne zog sich schon nach weniger als zwei Wochen aus dem Unternehmen zurück und ließ sich von seinen nur 21 und 25 Jahre alten Kollegen für 800 Dollar ausbezahlen. 1985 verließ Steve Jobs aufgrund von immer häufiger auftretenden Konflikten das Unternehmen, um noch im gleichen Jahr eine Konkurrenzfirma namens NeXT Inc. zu gründen. Nach der Krise 1993-1994 kaufte Apple die Firma von Steve Jobs für 404 Millionen Dollar auf. Somit kam Steve Jobs 1997 zurück ins Unternehmen und krempelte es als neuer CEO sehr schnell um. Apples Situation hatte sich in den zehn Jahren seit Jobs' Rückkehr enorm verbessert, das Unternehmen wirft lukrative Gewinne ab und ist dabei, sich ein Lifestyle-Image mitsamt großer Fan-Basis aufzubauen.</p>
<p>Apple steht vor allem für die Nichtberücksichtigung der arbeitsrechtlichen und gesundheitlichen Belangen der asiatischen Arbeiter in der Kritik. Des Weiteren gab es Vorfälle, bei denen Überstunden geschoben werden mussten und es zur Unterschreitung des gesetzlichen Mindestlohns kam. Eine Untersuchung von Apple widersprach dem, stellte jedoch Verstöße gegen den Apple-eigenen Verhaltenskodex für Zulieferer fest. Seit 2012 überwacht das Unternehmen die Wochenarbeitszeiten von mehr als einer Million Arbeitern bei Zulieferbetrieben und veröffentlicht diese Daten im Internet.</p>
</div>
<br><br>
</div>
<footer class="footer">
<br>
Website & Texte: <br>
Carolin Körner                      Julian Oste <br>
Florian von der Heide                  Sarah Ritter
<br><br>
</footer>
<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>
</body>
</html>
当我通过
链接脚本时<script src="myscript.js"></script>
这是我的css：
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
font-family: "Bookman Old Style";
font-size: 1.5em;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
-moz-hyphens: none;
-o-hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
background-color: #C5F8FF;
margin-left: -1vw;
margin-right: -1vw;
}
table, td, th {
border: 2px solid black;
border-collapse: collapse;
}
th {
text-align: center;
}
td {
text-align: left;
}
.complogo {
position: absolute;
top: 0;
left: 1%;
width: 5vw;
}
.unserLogo {
position: absolute;
top: 0;
left: 1%;
width: 10vw;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #030303;
overflow-x: hidden;
transition: 0.5s;
padding-top: 7%;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 1.07em;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closer {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.navOpener {
margin-left: 0.3%;
font-size:1.5em;
cursor:pointer;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
padding-top: 60px;
}
#textbox {
width:55%;
margin-left: 20%;
text-align: justify;
/*Automatische Bindestriche*/
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
background-color: white;
padding-left: 1vw;
padding-right: 1vw;
}
#main {
transition: margin-left .5s;
padding: 16px;
position: relative;
flex: 1 0 auto;
background-color: white;
}
.footer {
flex-shrink: 0;
background-color: #111;
color: #818181;
width: 100%;
margin: 0;
padding: 0;
font-size: 0.9em;
text-align: center;
}
答案 0 :(得分：-1)
您需要将导航栏设置为position: fixed。这将使导航栏相对于视口（窗口）定位。
https://developer.mozilla.org/en-US/docs/Web/CSS/position
#navbar {
left: 0;
position: fixed;
right: 0;
top: 0;
}
您还可能需要将z-index调整为高于后续元素：
z-index: 10;
<强>更新
考虑重构一下你的JavaScript。我还建议您查看限制，以便您的脚本不会对页面性能产生负面影响。
/*
IIFE (Immediately Invoked Function Expression) protects the global
scope from the variables navbar and sticky and the toggleSticky function.
*/
(function () {
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function toggleSticky() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
/*
Add event listener as opposed to overwriting any other scroll handlers.
There is also no need to create an anoymous function to call your scroll
handling function, simply pass the name of the handler:
*/
window.addEventListener('scroll', toggleSticky);
}());