粘性导航条技巧(jquery修复)
sticky nav bar trick (jquery fixed)
基本上,当导航栏(或任何元素)到达页面或窗口的顶部时,它将为元素添加一类粘性,CSS将使其固定。作为IF语句工作,所以当它不在顶部附近时,它会删除类,从而恢复正常。
我已经正确地完成了所有的代码,两次和三次检查每件事。当在Chrome上的开发人员工具,我可以看到jQuery做它的工作正确,添加和删除类在正确的时间,只是CSS似乎不工作。
$(document).ready(function() {
var stickyNavTop = $('nav').offset().top;
var stickyNav = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
* {
margin: 0;
padding: 0;
font-family: "Helvetice Neue", sans-serif;
}
@font-face {
font-family: "Helvetica Neue";
src: url("../fonts/HelveticaNeue.otf");
}
html, body {
width: 100%;
height: 100%;
}
div#container {
width: 100%;
height: 100%;
}
div#content {
width: 100%;
height: 100%;
}
section#main-bg {
width: 100%;
height: 100%;
}
#main-bg img {
width: 100%;
height: 100%;
position: fixed;
z-index: -9999; /* always on bottom */
}
nav {
width: 100%;
height: 60px;
bottom: -60px;
background-color: #333333;
}
/* nav */ .sticky {
position: fixed;
}
nav ul {
float: right;
}
nav ul li {
float: left;
margin-left: 40px;
list-style: none;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 20px;
line-height: 60px;
}
div#content {
width: 100%;
height: 2000px;
background-color: #dedede;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Josh Murray | My Personal Page</title>
<meta name="viewport" content="width=device-width, height=device-width, user-scalable=no, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/main_styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="scripts/homemadeSticky.js"></script>
</head>
<body>
<div id="container">
<section role="banner" id="main-bg">
<!-- this is where the full screen image will be -->
<img src="img/bg.jpg">
</section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div id="content">
<!-- content in here -->
</div>
</div>
</body>
</html>
提前感谢
你的css没有告诉它要在哪里修复,只需将其更改为
.sticky {
position: fixed;
top: 0;
}
$(document).ready(function() {
var stickyNavTop = $('nav').offset().top;
var stickyNav = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
* {
margin: 0;
padding: 0;
font-family: "Helvetice Neue", sans-serif;
}
@font-face {
font-family: "Helvetica Neue";
src: url("../fonts/HelveticaNeue.otf");
}
html, body {
width: 100%;
height: 100%;
}
div#container {
width: 100%;
height: 100%;
}
div#content {
width: 100%;
height: 100%;
}
section#main-bg {
width: 100%;
height: 100%;
}
#main-bg img {
width: 100%;
height: 100%;
position: fixed;
z-index: -9999; /* always on bottom */
}
nav {
width: 100%;
height: 60px;
bottom: -60px;
background-color: #333333;
}
/* nav */ .sticky {
position: fixed; top: 0;
}
nav ul {
float: right;
}
nav ul li {
float: left;
margin-left: 40px;
list-style: none;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 20px;
line-height: 60px;
}
div#content {
width: 100%;
height: 2000px;
background-color: #dedede;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Josh Murray | My Personal Page</title>
<meta name="viewport" content="width=device-width, height=device-width, user-scalable=no, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/main_styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="scripts/homemadeSticky.js"></script>
</head>
<body>
<div id="container">
<section role="banner" id="main-bg">
<!-- this is where the full screen image will be -->
<img src="img/bg.jpg">
</section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div id="content">
<!-- content in here -->
</div>
</div>
</body>
</html>
相关文章:
- 修复了使用Jquery的列(表头问题)
- 如何修复 jQuery 1.8“语法错误,无法识别的表达式”错误
- 使用JQuery从窗口底部修复元素
- Jquery滑块修复
- 如何修复多个字段上的jQuery Validation
- 如何使用下拉菜单修复jquery日期选择器日期计算功能
- Dreaded 100%边栏高度-jQuery修复,但另一个问题出现了
- 适用于 iOS 视口的 jQuery 修复
- 如何使用javascript/jquery修复页眉和页脚
- jquery:修复 if() 的第一次失火
- Jquery-修复切换元素内部的超链接
- 平滑滚动jquery+修复导航错误
- 如何使用JQuery修复此动画
- jQuery修复了" Uncaught TypeError: $不是一个函数"的问题错误
- 使用jQuery修复html表格的部分
- 通过jQuery修复窗口定位工具提示
- 如何使用JQuery修复窗口高度,以调整面板溢出y滚动
- 如何改变一个属性的聚合物元素与jquery?(修复加载时应用程序抽屉故障)
- 粘性导航条技巧(jquery修复)
- 是否有一个jQuery修复程序可以使CSS3在所有浏览器中工作