Sticky Nav与内容的碰撞

时间：2016-01-14 17:47:04

标签： 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>

3 个答案:

答案 0 :(得分：2)

这是一个解决方案，只使用普通香草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);

以下是完整的工作示例：

＆＃13;
＆＃13; 
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);
＆＃13; 
#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;
}
＆＃13; 
		<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您的代码中有错误：

jQuery("nav").addClass("fixed");

应该是

jQuery(".nav").addClass("fixed");

注意选择器中缺少的时间段。

编辑：

您还必须修复其他对nav的引用。

此外，您正在使用状态div的类选择器，但它的ID不是类，因此您必须使用＃selector：

jQuery("#status").html(scrollPos);

所以在所有情况下，如果您的HTML看起来像这样

<div class="class-name"></div>

你的jQuery将是

jQuery(".class-name");

和id为

的元素 
<div id="element-id"></div>

你的jQuery将是

jQuery("#element-id");

希望这有帮助

答案 2 :(得分：0)

将您的标记与脚本进行比较我发现问题是一些错别字。您告诉您的脚本在标记中查找不存在的内容。

在这一行：var navOffset = jQuery("nav").offset().top;您引用的是本地＆＃34; nav＆＃34; element，当你真的想要引用＆＃34; nav＆＃34;的类名时。

将其更改为：var navOffset = $(".nav").offset().top;

同样在这一行：jQuery(".status").html(scrollPos);您引用的是＆＃34; status＆＃34;的类名。当你真的想要引用一个ID时。

将其更改为("#status").html(scrollPos);

之后，您还需要更新if / else循环以引用.nav类名而不是本地＆＃34; nav＆＃34;元件。

试一试。我能够在我的垃圾箱里工作：https://jsbin.com/lumabe/edit?html,css,js,output

使用javascript进行DOM操作时，魔鬼就是细节！

以下是完整的，更正后的脚本：

jQuery(document).ready(function() {
var navOffset = jQuery(".nav").offset().top;

jQuery(window).scroll(function() {

    var scrollPos = jQuery(window).scrollTop();
    jQuery("#status").html(scrollPos);

    if (scrollPos >= navOffset) {
        jQuery(".nav").addClass("fixed");
    } else {
        jQuery(".nav").removeClass("fixed");
    }
});

}）;

相关问题
最新问题