滚动后保持固定的菜单栏不起作用
Menubar that stays fixed after scrolling doesnt work
下面我已经粘贴了我的html、css和js。当用户向下滚动到500px时，我试图让我的菜单栏固定在顶部。一旦向下滚动到500px，菜单栏就不会获得固定属性。
我在这里做错了什么？我从这个小提琴中得到了这个想法
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="menubar.css">
<script src="menubar.js"></script>
</head>
<body>
<header>
</header>
<div class="container">
<div id="Blackbar" class="clearfix">
<nav id='nav_bar'>
<ul class='nav_links'>
<li id="Home">
<a href="default.asp">Home</a>
</li>
<li id="Tracks">
<a href="default.asp">Tracks</a>
</li>
<li id="Events">
<a href="default.asp">Events</a>
</li>
<li id="Blog">
<a href="default.asp">Blog</a>
</li>
<li id="About">
<a href="default.asp">About</a>
</li>
</ul>
</nav>
</div>
<div id="Content" class="clearfix">
<div id="ArtikelFrame" class="clearfix">
<p id="Koptekst">
Nieuwe muziek
</p>
<p id="Ondetitel">
Vrijdag 27 maart | Budakid
</p>
<img id="ArtikelPlaatje" src="img/general-midi-logo.jpg" class="image" />
<p id="TekstDeel1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
<br />
<br />
</p>
<p id="TekstDeel2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
<br />
<br />
<br />Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
<br />
</p>
</div>
<div id="ArtikelFrame" class="clearfix">
<p id="Koptekst">
Nieuwe muziek
</p>
<p id="Ondetitel">
Vrijdag 27 maart | Budakid
</p>
<img id="ArtikelPlaatje" src="img/general-midi-logo.jpg" class="image" />
<p id="TekstDeel1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
<br />
<br />
</p>
<p id="TekstDeel2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
<br />
<br />
<br />Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
<br />
</p>
</div>
<div id="ArtikelFrame2" class="clearfix">
<p id="Koptekst">
Nieuwe muziek
</p>
<p id="Ondetitel">
Vrijdag 27 maart | Budakid
</p>
<img id="ArtikelPlaatje" src="img/general-midi-logo.jpg" class="image" />
<p id="TekstDeel1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
<br />
<br />
</p>
<p id="TekstDeel2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
<br />
<br />
<br />Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
<br />
</p>
</div>
</div>
<div id="Footer" class="clearfix">
</div>
</body>
</html>
CSS
body {
background-color: rgb(255, 255, 255);
padding: 0px;
margin: 0px;
font-family: 'AvenirNext';
src: url('fonts/riesling.eot');
src: local('AvenirNextLTProCn'), local('AvenirNextLTProCn'), url('fonts/AvenirNextLTProCn.otf') format('opentype');
position: relative;
top: 0;
}
.container {
height: auto;
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 1025px;
position: relative;
background-color: green;
}
nav {
height: 60px;
display: block;
width: 1025px;
background-color: #fff;
box-shadow: 0px 5px 20px #6e6e6e;
z-index: 3;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
font-size: 1.65em;
text-align: center;
width: 20%;
margin-top: 14px;
}
a {
text-decoration: none;
color: black;
}
header {
background-image: url(img/10634107_736318616436352_1616233075386796082_o-2.jpg);
height: 500px;
overflow: hidden;
width: 100%;
}
#Blackbar {
float: left;
height: 40px;
clear: both;
width: 100%;
background-color: black;
}
#Content {
float: left;
height: auto;
clear: both;
width: 66.66%;
border-right-width: 1px;
border-right-color: rgb(156, 156, 156);
border-right-style: solid;
border-left-color: rgb(156, 156, 156);
border-left-width: 1px;
border-left-style: solid;
}
#ArtikelFrame {
float: left;
height: auto;
clear: none;
width: 100%;
display: block;
border-bottom-width: 1px;
border-bottom-color: rgb(156, 156, 156);
border-bottom-style: solid;
}
#ArtikelFrame2 {
float: left;
height: auto;
clear: none;
width: 100%;
display: block;
}
#Koptekst {
font-size: 1.3em;
width: 100%;
height: auto;
text-align: left;
font-weight: normal;
line-height: 1em;
margin-left: 4%;
margin-top: 4%;
clear: none;
min-height: 0px;
margin-right: 4%;
}
#Ondetitel {
float: left;
font-size: 0.75em;
width: 100%;
height: auto;
text-align: left;
font-weight: normal;
line-height: 1em;
margin-left: 4%;
margin-top: 2%;
clear: both;
min-height: 0px;
margin-right: 0%;
color: rgb(156, 156, 156);
}
#ArtikelPlaatje {
float: left;
width: auto;
max-width: 50%;
height: auto;
margin-left: 4%;
margin-top: 4%;
clear: both;
color: rgb(0, 0, 0);
}
#TekstDeel2 {
float: left;
font-size: 1em;
width: auto;
height: auto;
text-align: left;
font-weight: normal;
line-height: 1em;
margin-left: 4%;
margin-top: 2%;
clear: both;
min-height: 0px;
margin-bottom: 4%;
margin-right: 4%;
}
#TekstDeel1 {
float: left;
font-size: 1em;
width: 42%;
height: auto;
text-align: left;
font-weight: normal;
line-height: 1em;
margin-left: 4%;
margin-top: 0%;
clear: none;
min-height: 0px;
margin-bottom: 4%;
margin-right: 4%;
}
#Footer {
float: left;
height: 400px;
clear: both;
width: 100%;
background-color: rgb(0, 0, 0);
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
body {
top: 0;
position: relative;
}
#nav_bar {
border: 0;
background-color: red;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
}
.nav_links {
margin: 0;
}
.nav_links li {
display: inline-block;
margin-top: 4px;
}
.nav_links li a {
padding: 0 15.5px;
color: #3498db;
text-decoration: none;
}
JQuery
$(document).ready(function () {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 500) {
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 501) {
$('#nav_bar').removeClass('navbar-fixed');
}
});
});
是否包含jQuery库？我在你的代码中看不到这一点。您可以在此处下载最新版本的jQuery：https://code.jquery.com/jquery-2.1.3.min.js。或者，如果您想浏览其他jQuery版本，请查看此处：https://code.jquery.com/
之后，将所需的jQuery库保存到HTML页面所在的文件夹中，并将其包含在脚本标记中。在HTML页面的正文中，在标签上方添加
<script src="jquery-2.1.3.min.js"></script>
相关文章：
- 滚动后保持固定的菜单栏不起作用
- 响应式导航栏不起作用，品牌变得一团糟
- 单击事件在响应菜单中不起作用
- Joomla 2.5 菜单按钮不起作用
- 我的顶级菜单项不起作用 - TWITTER Bootstrap
- html 站点中的菜单项不起作用
- 单击时侧边栏不起作用
- 为什么我的下拉菜单代码不起作用
- 将jQuery转换为Angular，固定侧边栏不起作用(?）
- 按钮在组合框菜单中不起作用
- 选择菜单更改不起作用
- 隐藏菜单元素不起作用
- 修复了位置导航栏不起作用的问题
- Javascript 递归循环到自动构建菜单结构不起作用
- 在Meteor中实体化导航栏不起作用
- jQuery放大弹出菜单根本不起作用
- 使用javascript制作Exp栏不起作用
- 链接在Angular应用中起作用，但地址栏不起作用
- 带偏移的侧边栏不起作用.我错了什么?
- 交易模板$routeProvider后的侧边栏不起作用
