jQuery 实现div在窗口滚动条到一定位置后显示并固定位置不动 拉上去后又消失
发布网友
发布时间：2022-04-21 12:18
共3个回答
热心网友
时间：2022-04-21 13:47
1、新建html文档。
2、书写hmtl代码。
3、书写css代码。* { margin: 0; padding: 0; list-style: none; }img { border: none; }body { font-family: Arial, Helvetica, sans-serif; }。
4、书写并添加js代码。<script src="js/jquery-1.10.2.js"></script><script src="js/zebra_pin.js"></script> 。
5、代码整体结构。
6、查看效果。
热心网友
时间：2022-04-21 15:05
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>menu</title>
<style type="text/css">
body {
height: 2000px;
}
div#hello {
position: fixed;
top: 300px;
width: 100%;
height: 30px;
border: 1px solid black;
display: none;
}
</style>
<script type="text/javascript">
onscroll = function ()
{
var st = document.documentElement.scrollTop || document.body.scrollTop;
if (!hello.offsetWidth && st >= 300)
{
hello.style.display = 'block';
}
else if (!!hello.offsetWidth && st < 300)
{
hello.style.display = 'none';
}
}
</script>
</head>
<body>
<div id="hello">Hello World!</div>
</body>
</html>
热心网友
时间：2022-04-21 16:40
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="js/jquery-2.1.1.min.js"></script>
<style>
.page{height:500px;width:500px;margin:0 auto;background-color:#CC9;overflow:hidden;overflow-y:auto;position:relative;}
.scroll{width:100%;height:800px;background-color:#e1e1e1;}
.show{width:200px;height:200px;background-color:#993;position:fixed;left:500px;top:100px;display:none;}
</style>
</head>
<body class="">
<div class="page">
<div class="scroll">
<div class="show"></div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$(".page").scroll(function(){
var scroll_top=$(".page").scrollTop();
if(scroll_top>=100){$(".show").css("display","block");}
else{$(".show").css("display","none");}
})
})
</script>
</html>
