我不知道我的代码出了什么问题。我正在使用bootstrap 3,当用户滚动到页面底部时,我想向我的<nav>
添加一个类,当他滚动到顶部时删除该类。
非常奇怪,jQuery正常工作(我放了一个代码来隐藏<h1>
元素进行测试。然而,滚动功能它不起作用。这非常奇怪和令人沮丧,因为确切当使用bootstrap 4时,相同的代码在其他项目中工作(我这次需要使用BS3)。
有人能看出我做错了什么吗? Bootstrap上有什么东西阻止滚动时的addClass吗?
以下是代码:
$(document).ready(function() {
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
});
$(document).ready(function() {
$("h1").click(function() {
$(this).hide();
});
});
});
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
body {
font-family: 'Montserrat', sans-serif;
}
.flex {
display: flex;
}
.row {
margin-right: 0;
margin-left: 0;
}
.site-container {
/*max-width:1920px;*/
margin: 0 auto;
}
.marged-left-only {
padding-left: 0;
padding-right: 0;
}
/* changing active page (navbar menu) style */
.navbar-inverse .navbar-nav>li>a {
transition: all .5s ease-in-out;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: #ed1c24;
}
.navbar {
background-image: url("../images/radial-gradient-nav.jpg");
background-size: cover;
background-position: left top;
background-repeat: no-repeat;
min-height: 80px;
margin-bottom: 0;
border-radius: 0;
border: none;
font-weight: 600;
text-transform: uppercase;
}
/* reseting negative margin-left (-15px) default on bootstrap */
.navbar>.container-fluid .navbar-brand {
margin-left: 0;
}
.navbar-brand {
height: 80px;
padding: 0;
line-height: 80px;
}
.navbar-brand img {
height: 100%;
width: auto;
}
.navbar-toggle {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 23px;
}
.navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.navbar-nav li a {
padding-right: 0;
padding-left: 0;
margin-left: 30px;
}
main p {
font-size: 2em;
max-width: 300px;
line-height: 2.2em;
}
@media only screen and (min-width: 768px) {
.container-fluid {
margin-right: 30px;
margin-left: 30px;
}
.navbar-nav>li>a {
/* (80px - line-height of 27px) / 2 = 26.5px */
padding-top: 26.5px;
padding-bottom: 26.5px;
line-height: 27px;
}
}
@media only screen and (min-width: 1200px) {
.container-fluid {
margin-right: 90px;
margin-left: 90px;
}
.navbar {
min-height: 160px;
}
.navbar-brand {
height: 160px;
line-height: 160px;
}
.navbar-nav>li>a {
/* (80px - line-height of 27px) / 2 = 26.5px */
padding-top: 53px;
padding-bottom: 53px;
line-height: 53px;
}
}
@media only screen and (min-width: 1366px) {
.container-fluid {
margin: 0px 120px;
}
}
@media only screen and (min-width: 1700px) {
.container-fluid {
margin: 0px 220px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>TESTE sticky</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- NAVBAR AREA -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="">
</a>
</div>
<!-- navbar-collapse -->
<div id="navbar" class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li><a href="#">nous joindre</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<main>
<h1>Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, reiciendis dolore vitae qui laborum earum cumque ratione commodi! Sit voluptate, esse sunt. Alias in officiis, qui fugit, omnis illum sequi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, reiciendis dolore vitae qui laborum earum cumque ratione commodi! Sit voluptate, esse sunt. Alias in officiis, qui fugit, omnis illum sequi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, reiciendis dolore vitae qui laborum earum cumque ratione commodi! Sit voluptate, esse sunt. Alias in officiis, qui fugit, omnis illum sequi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, reiciendis dolore vitae qui laborum earum cumque ratione commodi! Sit voluptate, esse sunt. Alias in officiis, qui fugit, omnis illum sequi.</p>
</main>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
答案 0 :(得分:0)
我发现了问题。
应用于我的CSS顶部的html元素的隐藏溢出显然阻止了侦听滚动事件。