[英]Scrolling website code using JS, HTML and CSS
当我滚动到菜单栏时,我一直试图让菜单栏粘在页面的顶部。 它最初不在顶部,但当我滚动到它时,它会粘在顶部。 我无法让它工作。
<html>
<head>
<! Links /!>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css.css">
<script type="text/javascript">
$(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() > 280) {
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('#nav_bar').removeClass('navbar-fixed');
}
});
});
</script>
<! Top Image /!>
<div class="cd-fixed-bg cd-bg-1">
</div>
<! MenuBar /!>
<div class="cd-scrolling-bg cd-color-2">
<div id="nav_bar" class="nav_bar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Examples</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</head>
<! Body /!>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br>
</body>
</div>
css:
/*Menubar*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #2c3e50;
color: #2c3e50;
}
li {
color: #ecf0f1;
display:inline-block;
}
li a:hover {
background-color: #2980b9;
color: #ecf0f1;
}
li a {
display: block;
color:#ecf0f1;
padding: 14px 16px;
text-decoration: none;
}
#nav_bar {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
margin-top: 0;
top: 0;
z-index: 10000;
border-radius: 0 0 0.5em 0.5em;
position: relative;
width:100%;
font-family: 'Roboto', sans-serif;
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31);
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
有很多 css 我没有发布,因为它与滚动无关(这是视差滚动)
检查这个例子,它作为一个普通元素开始,滚动事件,如果需要,它会修复它:
<html>
<head>
<script>
function Menu(){
if(document.body.scrollTop>200){
menu=document.getElementById('menu');
menu.style.position='fixed';
menu.style.top='0px';
}else{
menu.style.position='absolute';
menu.style.top='200px';
}
}
</script>
<style>
body{
height:300%;
margin:0;
}
#menu{
background-color:gray;
height:10%;
position:absolute;
top:200px;
width:100%;
}
</style>
</head>
<body onscroll="Menu()">
<div id="menu">
</div>
</body>
</html>
尝试使用固定在标题 div 上的位置
[CSS]
body {
height: 1000px;
margin: 0;
padding: 0
}
.header {
width: 100%;
border: solid 1px #fff;
position: fixed;
top: 0;
}
ul {
border: solid 1px #f00;
list-style-type: none;
overflow: hidden;
}
li {
width: 25%;
float: left;
}
[html]
<div class="header">
<ul>
<li><a href="">Menu1</a></li>
<li><a href="">Menu1</a></li>
<li><a href="">Menu1</a></li>
<li><a href="">Menu1</a></li>
</ul>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.