nav - 与内容的粘性导航碰撞

标签 nav sticky

所以这个问题现在已经适应了内容部分，一旦它被“修复”就不会承认导航栏。当您缓慢向下滚动时，您可以看到这一点(它会跳过 2-3 行文本。)有什么建议吗？

这是我的代码:

function fixNav() {

/* Grab .nav */
var nav = document.getElementsByClassName('nav')[0];

/* Find the initial offsetTop position of .nav */
var banner = document.getElementsByClassName('banner')[0];
var socialLinks = document.getElementsByClassName('sociallinks')[0];
var navStartPosition = banner.offsetHeight + socialLinks.offsetHeight;

/* Check current offsetTop position of .nav */
var navNewPosition = nav.getBoundingClientRect().top;

/* If .nav is at the top of the screen (or above), fix it */
if (navNewPosition < 0) {
nav.classList.add('fixed');
}

/* If .nav is in its normal on-page position (or below), unfix it */
if (window.scrollY <= navStartPosition) {
nav.classList.remove('fixed');  
}

}

/* Run function whenever window scrolls */
window.addEventListener('scroll',fixNav,false);
.banner,.sociallinks,.nav,.nav ul
{
	max-width: 100%;
	max-width: 100%;
}

.nav
{
	font-family: 'Oswald', sans-serif; font-weight: 300;
}

html
{
	background: #333;
	background-attachment: fixed;
	background-size: 50px;
}

body
{
	margin: 0px auto;
	text-align: center;
}

.banner
{
	width: 700px;
	margin: 10px auto 0px auto;
	padding: 0px;
}

.sociallinks
{
	width: 960px;
	margin: 0px auto;
}

.sociallinks ul
{
	list-style-type: none;
	margin: 0px auto;
	padding: 0px
}

.sociallinks ul li
{
	display: inline-block;
	padding: 0px 10px;
}

.sociallinks ul li img 
{
	-webkit-filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.5));
	width: 30px;
	height: 30px;
}

.nav
{
	width: 100%;
	margin: 0px auto;
	background: #333;
	padding: 1px 0px;
}

.nav ul
{
	width: 100%;
	list-style-type: none;
	margin: 10px auto;
	padding: 0px;
}

.nav ul li
{
	color: white;
	text-align: center;
	display: inline-block;
	text-decoration: none;
}

.nav ul li a
{
	width: 60px;
	border-top-color: silver;
	border-top-style: solid;
	border-top-width: 1px;
	color: white;
	text-align: center;
	display: inline-block;
	text-decoration: none;
}

.nav ul li a:hover:not(.active)
{
	display: inline-block;
	text-decoration: none;
	color: #111;
	border-top-color: #111;
}

.nav ul li a.active
{
	border-top-color: #111;
	color: rgba(0,0,0,0.8);
	text-shadow: 0.5px 0.5px 0.1px rgba(0,0,0,0.3);
}

.fixed
{
	background-color: #333;
	position: fixed;
	top: 0px;
	padding: 0px;
	margin: 0px 0px;
	width: 100%;
	z-index:0;
}

.content
{
	position: relative;
	background-color: rgba(0,0,0,0.1);
	color: white;
	width: 960px;
	height: 1500px;
	max-width: 95%;
	max-width: 95%;
	margin: 0px auto;
	padding: 0px;
	border: 0px;
	z-index: -1;
	overflow: hidden;
}

table
{
	width: 100%;
}
<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<link rel="stylesheet" type="text/css" href="main.css">
    		<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
    		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    		<title>Broadbent</title>
    	</head>
    	<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
    	<body>
    		<div class="banner">
    			<img src="https://i.gyazo.com/655ab7687250c664674d857632b478fa.png" alt="BROADBENT" width="100%">
    		</div>
    		<div class="sociallinks">
    			<ul>
    				<li><a href="https://twitter.com/Broadbent45" target="_blank"><img src="https://i.gyazo.com/bef1f025ca882ab5d542b9c72b91a76b.png" alt="Twitter"></a></li>
    				<li><a href="https://www.youtube.com/user/OAB450" target="_blank"><img src="https://i.gyazo.com/55b8298090b8cb625f3973117af5ee30.png" alt="YouTube"></a></li>
    				<li><a href="https://plus.google.com/+OAB450" target="_blank"><img src="https://i.gyazo.com/396ee154e38f7fe6b2c5328bb806483e.png" alt="Google+"></a></li>
    			</ul>
    		</div>
    		<div class="nav">
    			<ul>
    				<li><a class="active" href="#">HOME</a></li><li><a href="#">MAPS</a></li><li><a href="#">ESSENTIALS</a></li><li><a href="#">FAQ</a></li>
    			</ul>
    		</div>
    		<div class="content">
    			Main Section 1<br>Main Section 2<br>Main Section 3<br>Main Section 4<br>Main Section 5<br>Main Section 6
    		</div>
    		<script type="text/javascript" src="js/main.js"></script>
    	</body>
    </html>

最佳答案

这是一种解决方案，只需使用普通 Vanilla javascript (而不是 jQuery ):

function fixNav() {

/* Grab .nav */
var nav = document.getElementsByClassName('nav')[0];

/* Find the initial offsetTop position of .nav */
var banner = document.getElementsByClassName('banner')[0];
var socialLinks = document.getElementsByClassName('sociallinks')[0];
var navStartPosition = banner.offsetHeight + socialLinks.offsetHeight;

/* Check current offsetTop position of .nav */
var navNewPosition = nav.getBoundingClientRect().top;

/* If .nav is at the top of the screen (or above), fix it */
if (navNewPosition < 0) {
nav.classList.add('fixed');
}

/* If .nav is in its normal on-page position (or below), unfix it */
if (window.scrollY <= navStartPosition) {
nav.classList.remove('fixed');  
}

}

/* Run function whenever window scrolls */
window.addEventListener('scroll',fixNav,false);

这是完整的工作示例:

function fixNav() {

/* Grab .nav */
var nav = document.getElementsByClassName('nav')[0];

/* Find the initial offsetTop position of .nav */
var banner = document.getElementsByClassName('banner')[0];
var socialLinks = document.getElementsByClassName('sociallinks')[0];
var navStartPosition = banner.offsetHeight + socialLinks.offsetHeight;

/* Check current offsetTop position of .nav */
var navNewPosition = nav.getBoundingClientRect().top;

/* If .nav is at the top of the screen (or above), fix it */
if (navNewPosition < 0) {
nav.classList.add('fixed');
}

/* If .nav is in its normal on-page position (or below), unfix it */
if (window.scrollY <= navStartPosition) {
nav.classList.remove('fixed');	
}

}

/* Run function whenever window scrolls */
window.addEventListener('scroll',fixNav,false);
#banner,#sociallinks,.nav,.nav ul
{
	max-width: 100%;
	max-width: 100%;
}

.nav
{
	font-family: 'Oswald', sans-serif; font-weight: 300;
}

html
{
	background: #333;
	background-attachment: fixed;
	background-size: 50px;
}

body
{
	margin: 0px auto;
	text-align: center;
}

.banner
{
	width: 700px;
	margin: 10px auto 0px auto;
	padding: 0px;
}

.sociallinks
{
	width: 960px;
	margin: 0px auto;
}

.sociallinks ul
{
	list-style-type: none;
	margin: 0px auto;
	padding: 0px
}

.sociallinks ul li
{
	display: inline-block;
	padding: 0px 10px;
}

.sociallinks ul li img 
{
	-webkit-filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.5));
	width: 30px;
	height: 30px;
}

.nav
{
	z-index: 99;
	width: 960px;
	margin: 0px auto;
	background-color: #333;
}

.nav ul
{
	width: 100%;
	list-style-type: none;
	margin: 10px auto;
	padding: 0px;
}

.nav ul li
{
	color: white;
	text-align: center;
	display: inline-block;
	text-decoration: none;
}

.nav ul li a
{
	width: 160px;
	border-top-color: silver;
	border-top-style: solid;
	border-top-width: 1px;
	color: white;
	text-align: center;
	display: inline-block;
	text-decoration: none;
}

.nav ul li a:hover:not(.active)
{
	display: inline-block;
	text-decoration: none;
	color: #111;
	border-top-color: #111;
}

.nav ul li a.active
{
	border-top-color: #111;
	color: rgba(0,0,0,0.8);
	text-shadow: 0.5px 0.5px 0.1px rgba(0,0,0,0.3);
}

.fixed
{
	position: fixed;
	top: 0;
	left: 50%;
	margin-left:-480px;
}


.content
{
	background-color: rgba(0,0,0,0.1);
	width: 960px;
	height: 1500px;
	max-width: 90%;
	max-width: 90%;
	margin: 0px auto;
	padding: 0px;
	border: 0px;
}

table
{
	width: 100%;
	color: white;
}
		<div id="status"></div>
		<div class="banner">
			<img src="https://i.gyazo.com/655ab7687250c664674d857632b478fa.png" alt="BROADBENT" width="100%">
		</div>
		<div class="sociallinks">
			<ul>
				<li><a href="https://twitter.com/Broadbent45" target="_blank"><img src="https://i.gyazo.com/bef1f025ca882ab5d542b9c72b91a76b.png" alt="Twitter"></a></li>
				<li><a href="https://www.youtube.com/user/OAB450" target="_blank"><img src="https://i.gyazo.com/55b8298090b8cb625f3973117af5ee30.png" alt="YouTube"></a></li>
				<li><a href="https://plus.google.com/+OAB450" target="_blank"><img src="https://i.gyazo.com/396ee154e38f7fe6b2c5328bb806483e.png" alt="Google+"></a></li>
			</ul>
		</div>
		<div class="nav">
			<ul>
				<li><a class="active" href="#">HOME</a></li><li><a href="#">MAPS</a></li><li><a href="#">ESSENTIALS</a></li><li><a href="#">FAQ</a></li>
			</ul>
		</div>
		<div class="content">
		</div>

关于nav - 与内容的粘性导航碰撞，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34796339/

上一篇：arrays - 如何在 Groovy 中转置矩阵？

下一篇：kohana - Kohana3 中的自定义异常处理

相关文章：

css - 具有自动宽度的元素不会扩展

html - 如何去除背景图片和导航栏之间的白色间隙

javascript - CSS |固定位置不适用于 IE11

CSS位置粘性不起作用

html - 如何扩展下拉菜单以适应里面的列表项

html - Flexbox:如何对齐推向相反方向的 Logo 和内联导航栏

javascript - CSS 过渡高度

html - Pure CSS Sticky Horizo​​ntal Subnav - 下拉菜单不显示

javascript - ReactJS错误编译失败 'define'未定义

javascript - 向下滚动后粘性标题

©2024 IT工具网  联系我们