javascript平时小例子⑧(导航置顶效果)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">

*{
margin: 0;padding: 0;
}
.wrap{
width: 100%;
height: 300px;
position: relative;
}
.wrap .top{
width:80%;
margin:0 auto;
height: 250px;
background: red;
}
.wrap .bottom{
width:80%;
margin:0 auto;
height: 50px;
background: blue;
}
.wrap .fix{
position: fixed;
top: 0;
left: 10%;
}
</style>
</head>
<body>
<div id="wrap" class="wrap">
<div id="top" class="top"></div>
<div id="bottom" class="bottom"></div>
</div>
<div style="height: 2000px;width: 100%;"></div>
<script>
var wrap,tops,bottom;
window.onload=function(){
wrap=document.getElementById("wrap");
tops=document.getElementById("top");
bottom=document.getElementById("bottom");
document.onscroll=function(){
var scroll=document.body.scrollTop||document.documentElement.scrollTop;
if(scroll>=tops.offsetHeight){
bottom.classList.add("fix");
}
else{
bottom.classList.remove("fix");
}
}
}
</script>
</body>
</html>

时间： 2024-12-25 03:24:24

javascript平时小例子⑧(导航置顶效果)的相关文章

javascript平时小例子⑤(投票效果的练习)

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #dakuang { width: 1000px; height: 30px; } #left, #right { height: 100%; float: left; } #left { background-color: red; /*width:

javascript平时小例子③（setInterval使用1）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .lala{ text-align: center; } </style> </head> <body> <div class="lala"> <input type="

javascript平时小例子①（移动的小div）

css样式: #box{ width: 300px; height: 300px; background: deepskyblue; position: absolute; margin-right: 20px; }  html布局: <div id="box"></div> js部分: window.onload=function(){ abc(); setInterval(abc,50) function abc(){ var oDiv=document.g

javascript平时小例子②（正则表达式验证邮箱）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>邮箱正则</title> </head> <body> <input type="text" id="Txt1" /> <input type="button" value="提交&quo

javascript平时小例子⑦(鼠标跟随的div)

<!doctype html><html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 { width: 200px; height: 200px; background-color: #0F0; position: absolute } </style> <script> window.onl

javascript平时小例子④（setInterval使用2）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0 auto; } #kaishi { text-align: center; background-color: red; width: 300px; height: 100px; border: 1px solid black

鼠标滚动,导航置顶.纯css3的position: sticky;

position: sticky; 这东西来自css3,并且瞬间就完成了置顶的效果. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .a{ //定位头部置顶效果 top: 0; position: sticky; } .b{ //当纯的给个滚

js之滚动置顶效果

0.js获取高度 ? 1 2 3 4 5 6 document.all   // 只有ie认识 document.body.clientHeight              // 文档的高,屏幕的文档区域的高 documemt.documentElement.clientHeight   // 有效的高,屏幕可视的高 document.documentElement.scrollHeight   // 屏幕的总高度 document.documentElement.scrollTop     

鼠标滑动一定距离的左侧菜单置顶效果

如图:上述实现的是鼠标向下滑动90px,左侧菜单整体上移置顶,而菜单在最开始便进行了定位,距离顶部90px 以下为实现这个效果的js代码: /*鼠标滑动一定距离的菜单效果*/ $(document).scroll(function() { var top=$(this).scrollTop(); console.log(top); if(top>90) { $(".sidebar").css("top","0"); } if(top<