javascript - 向下滚动页面后，粘性导航栏不显示所有下拉选项的问题

Question

我已经在我试图创建的站点内实现了一个导航栏，但是，导航栏的所有下拉选项唯一一次出现是在它位于页面顶部时。一旦我向下滚动页面，选项就会一个接一个地隐藏起来。 (如果你特别看一下个人资料按钮，你会看到一个按钮在另一个按钮后面，因为 :hover 是不同的颜色。)

我在 CSS 中用溢出和定位弄乱了一点。使溢出显示与 overflow hidden 。我已经从 header 中删除了导航栏以查看这是否是一个问题，同时从 HTML 中删除了 header 以查看那里是否存在问题。

p {
	padding: 13px;
	text-align: justify;
}

.nav {
	position: fixed;
	width: 100%;
	top: 0;
}

.nav a {
	position: fixed;
	background-color: #333;
	z-index: 9999;
	overflow: show;
}

.nav a.home-btn {
	position: relative;
}

.nav a.logout-btn {
	position: relative;
}

#head1 {
	text-align: center;
	background-color: black;
	color: white;
	font-family: sans-serif;
	text-decoration: none;
	font-size: 30px;
	padding: 10px 14px;
}

* {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	list-style: none;
	text-decoration: none;
	z-index: 9999;
}

.navbar {
	overflow: hidden;
	background-color: #333;
	font-family: sans-serif;
	z-index: 9999;
}

.navbar a {
	float: left;
	font-size: 16px;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

.profile-dropdown {
	float: left;
	overflow: hidden;
}

.profile-dropdown .profile-btn {
	font-size: 16px;
	border: none;
	outline: none;
	color: white;
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
}

.profile-content {
	display: none;
	position: absolute;
	background-color: #333;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.profile-content a {
	float: none;
	color: white;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.profile-content a:hover {
	background-color: gray;
}

.profile-dropdown:hover .profile-content {
	display: block;
}

.search-dropdown {
	float: left;
	overflow: hidden;
}

.search-dropdown .search-btn {
	font-size: 16px;
	border: none;
	outline: none;
	color: white;
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
}

.search-btn:hover,
.profile-btn:hover,
.home-btn:hover,
.logout-btn:hover {
	background-color: #2ecc71;
}

.navbar a.logout-btn {
	float: right;
}

.search-content {
	display: none;
	position: absolute;
	background-color: #333;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.search-content a {
	float: none;
	color: white;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.search-content a:hover {
	background-color: gray;
}

.search-dropdown:hover .search-content {
	display: block;
}

.listings-dropdown {
	float: left;
	overflow: hidden;
}

.listings-dropdown .listings-btn {
	font-size: 16px;
	border: none;
	outline: none;
	color: white;
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
}

.listings-content {
	display: none;
	position: absolute;
	background-color: #333;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.listings-content a {
	float: none;
	color: white;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.listings-content a:hover {
	background-color: gray;
}

.listings-dropdown:hover .listings-content {
	display: block;
}

.listings-btn:hover {
	background-color: #2ecc71;
}

.messages-dropdown {
	float: left;
	overflow: hidden;
}

.messages-dropdown .messages-btn {
	font-size: 16px;
	border: none;
	outline: none;
	color: white;
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
}

.messages-content {
	display: none;
	position: absolute;
	background-color: #333;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.messages-content a {
	float: none;
	color: white;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.messages-content a:hover {
	background-color: gray;
}

.messages-dropdown:hover .messages-content {
	display: block;
}

.messages-btn:hover {
	background-color: #2ecc71;
}

.settings-dropdown {
	float: left;
	overflow: hidden;
}

.settings-dropdown .settings-btn {
	font-size: 16px;
	border: none;
	outline: none;
	color: white;
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
}

.settings-content {
	display: none;
	position: absolute;
	background-color: #333;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.settings-content a {
	float: none;
	color: white;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.settings-content a:hover {
	background-color: gray;
}

.settings-dropdown:hover .settings-content {
	display: block;
}

.settings-btn:hover {
	background-color: #2ecc71;
}

.sticky {
	position: fixed;
	top: 0;
	width: 100%;
}

<html>
	<link rel="stylesheet" href="../css/searchLost.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudfare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<body>
		<div class="header">
			<h1 id="head1">Lost And Found</h1>
		</div>
		<div class="navbar">
			<a href="mainPage.html" class="home-btn">Home</a>

			<div class="profile-dropdown">
				<button class="profile-btn">Profile<i class="fa fa-caret-down"></i></button>
				<div class="profile-content">
					<a href="index.html">Your Listings</a>
					<a href="#">Update Info</a>
				</div>
			</div>

			<div class="search-dropdown">
				<button class="search-btn">Search<i class="fa fa-caret-down"></i></button>
				<div class="search-content">
					<a href="#">Search Lost</a>
					<a href="#">Search Found</a>
				</div>
			</div>

			<div class="listings-dropdown">
				<button class="listings-btn">Listings<i class="fa fa-caret-down"></i></button>
				<div class="listings-content">
					<a href="#">Report Lost</a>
					<a href="#">Report Found</a>
				</div>
			</div>

			<div class="messages-dropdown">
				<button class="messages-btn">Messages<i class="fa fa-caret-down"></i></button>
				<div class="messages-content">
					<a href="#">New</a>
					<a href="#">Sent</a>
					<a href="#">Deleted</a>
				</div>
			</div>

			<div class="settings-dropdown">
				<button class="settings-btn">Settings<i class="fa fa-caret-down"></i></button>
				<div class="settings-content">
					<a href="#">Change Password</a>
				</div>
			</div>
			<a href="index.html" class="logout-btn">Logout</a>
		</div>

		<script type="text/javascript">
			var nav = document.getElementsByClassName('navbar');

			window.onscroll = function sticky() {
				if (window.pageYOffset > nav[0].offsetTop) {
					nav[0].classList.add('nav');
				} else {
					nav[0].classList.remove('nav');
				}
			};
		</script>

		<p>
			Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the
			page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out
			the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page.
		</p>
	</body>
</html>

我想要的是让导航栏显示所有下拉选项，而不管导航栏的位置如何，无论它是在页面顶部一直滚动到顶部，还是在滚动时在顶部下。

Answer 1

您为每个下拉菜单使用了不同的 css 类，这对您的工作和其他人帮助您都具有挑战性。我修复了个人资料下拉列表，剩下的由你决定。把它当作一个学习的机会。您应该为所有下拉菜单使用相同的 css 类，它们中的任何一个都没有足够的不同来保证只为给定的下拉菜单设置一个类。

此外，下次您提交代码时，我们将提供一个 jsfiddle https://jsfiddle.net/3qwy26rp/22/

.profile-content {
display: none;
position: fixed;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}




.profile-content a {
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    position: relative;
}