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、查看效果。
<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>
<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>本回答被提问者和网友采纳
jQuery 实现div在窗口滚动条到一定位置后显示并固定位置不动 拉...
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.j...
jquery 窗口效果。如何使一个小的窗口弹出来,在屏幕的固定位置。当主...
你可以用position：fixed这个属性，然后再设置top和left.这样弹出窗口将以浏览器的顶和左定位。即使你滚动窗口也不会改变。但是position：fixed这个属性在ie6中是不支持的。还有一种方法就是用js去控制窗口的top和left。滑动滚动条的时候同时更改窗口的top和left。
css如何实现div随滚动条移动css左右滚动条
1。在头部定义一个div，固定高度，设置绝对位置(position:absolute)，设置上边距(top:0)；2.在底部定义一个div，固定高度，设置绝对位置(position:absolute)，设置下边距(bottom:0)；3.在中间定义一个div并自动设置滚动条(溢出:auto)；设置绝对定位(position:absolute)，设置top和bottom，top的值等于头d...
jQuery 实现div在窗口滚动条到一定位置后显示并固定位置不动 拉...
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.j...
