个人中心
gpt4 book ai didi

javascript - 粘性导航栏的响应取决于滚动

转载 作者：行者123 更新时间：2023-11-30 14:22:18 27 4
gpt4 key购买 nike

我已经实现了让我的网页的导航栏具有粘性和响应性，但有一个问题。一开始，当屏幕缩小并点击汉堡包图标时，整个导航栏向左移动，当我稍微滚动页面时，它完全可以正常工作，为什么会这样？

<!DOCTYPE html>
<html>
<head>
	<title>Careers</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
</head>
<body>
<style>
	body, html{
	height: 100%;
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	line-height: 150%;
	color: #666;
	text-align: center;
}

/* Add bg color to topnav*/
.topnav{
	background: #333;
	overflow: hidden;
	z-index: 1;
}

/*Style links inside navbar*/
.topnav a{
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

/*Change link color on hover*/
.topnav a:hover{
	background: #ddd;
	color: black;
}

/*Add an active class to highlight the current page*/
.active{
	background: #4CAF50;
	color: white;
}

/*Hide the link that should open and close the topnav on small screens*/
.topnav .icon{
	display: none;
}

/*When the screen is less than 600px wide, hide all the links, except for the first one("Home").
Show the link that should open and close the topnav(.icon)*/
@media screen and (max-width: 600px){
	.topnav a:not(:first-child){display: none;}
	.topnav a.icon{
		float: right;
		display: block;
	}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon.
This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px){
	.topnav.responsive{
		position: fixed;
	}
	.topnav.responsive .icon{
		position: fixed;
		right: 0;
		top: 0;
	}
	.topnav.responsive a{
		float: none;
		display: block;
		text-align: left;
	}
}

/*The sticky class is added to the navbar with JS when it reaches its scroll position*/
.sticky{
	position: fixed;
	top: 0;
	width: 100%;
}

.parallax1{
	background: url("img/joinUs3.jpg") no-repeat center center fixed;
	min-height: 80%;

}

.parallax2{
	background: url("img/notSure3.jpg") no-repeat center center fixed;
	min-height: 60%;
}

.parallax3{
	background: url("img/culture3.jpg") no-repeat center center fixed;
	min-height: 60%;
}

.parallax4{
	background: url("img/rightEmployee3.jpg") no-repeat center center fixed;
	min-height: 80%;
}

.parallax1, .parallax2, .parallax3, .parallax4{
	position: relative;
	opacity: .8;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}

.heading{
	position: absolute;
	color: #fffaf7;
	font-size: 550%;
	font-weight: 700;
	top: 50%;
	width: 100%;
	text-transform: uppercase;
	letter-spacing: 8px;
	text-shadow: 0 0 10px #f96f1b;
	line-height: 1.1;
}

.heading2{
	position: absolute;
	color: #fffaf7;
	font-size: 250%;
	font-weight: 700;
	top: 50%;
	width: 100%;
	text-transform: uppercase;
	letter-spacing: 5px;
	text-shadow: 0 0 10px #f96f1b;
	line-height: 1.1;	
}

section{
	overflow: auto;
	padding: 50px 80px;
}
</style>

<!--Navigation Bar -->
<div class="topnav" id="myTopnav">
	<a href="#home">Home</a>
	<a href="#career" class="active">Careers</a>
	<a href="#fellowship">About Us</a>
	<a href="javascript:void(0);" class="icon">
		<i class="fas fa-bars"></i>
	</a>
	<a href="#contact">Contact Us</a>
</div>



<!--Parallax-->
<div class="parallax1">
	<div class="heading">
		Lorem Ipsum
	</div>
</div>

<section class="dark">
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
	</p>
</section>
<div class="parallax2">
	<div class="heading2">
		Lorem Ipsum is simply. 
	</div>
</div>

<section class="dark">
	<h1>Lorem Ipsum is simply dummy text of the printing</h1>
	<div class="not-sure-sec">
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
	</div>
</section>

<div class="parallax3">
	<div class="heading2">
		Lorem Ipsum is.
	</div>
</div>

<section class="dark">
	<section class="culture">
		<h2>Lorem Ipsum</h2>	
	</section>
	<section class="insta">
		Lorem Ipsum
	</section>
	<section class="facebook">
		Lorem Ipsum
	</section>
</section>

<div class="parallax4">	
	<div class="heading2">
		Lorem Ipsum is simply
	</div>
</div>

<div class="dark">
	<section class="apply">
		<h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>	
	</section>
	<section class="linkedin">
		Lorem Ipsum
	</section>
	<section class="contact-us">
		Lorem Ipsum
	</section>
</div>

<script>
	document.addEventListener('DOMContentLoaded',function(){
	
	window.addEventListener('scroll', myFunctionForSticky);
	var navbar = document.getElementById("myTopnav");
	var sticky = navbar.offsetTop;
	
	function myFunctionForSticky() {
    
    	if (window.pageYOffset >= sticky) {
      		navbar.classList.add("sticky");
    	} else {
      		navbar.classList.remove("sticky");
    	}
  	}

  var icon = document.querySelector("a.icon");
  icon.addEventListener("click",function(){
  	navbar.classList.toggle("responsive");
  })

})
</script>

</body>
</html>

最佳答案

它只需要在类 .topnav.responsive 上添加 width:100% 在 600px 媒体宽度

@media screen and (max-width: 600px) {
.topnav.responsive {
    position: fixed;
    width: 100%;
}
}

关于javascript - 粘性导航栏的响应取决于滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52552512/

27 4 0
文章推荐： javascript - 无法在spring security中加载静态内容
文章推荐： python - 编程语言翻译器如何工作？
文章推荐： c - 指或不指
文章推荐： c# - DrawImage 调整后的图像太小