如何实现滚动条向下拉到一定的程度,然后这层就一直占着不管滚动条如何向下拉都不动了的效果?
想实现和腾讯的如下效果,不过本人不会CSS,请各位大神班忙,谢谢http://data.auto.qq.com/car_serial/469/modelscompare.shtml
如何实现滚动条向下拉到一定的程度,然后这层就一直占着不管滚动条如何向下拉都不动了的效果? CSS 滚动条 --------------------编程问答-------------------- 不能访问qq,,楼主你的意思 是不是 你说的层 随着滚动条的滚动一直处于浏览器最底端。。
如果是这样,,那就这样子啦~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body style="height:1500px">
<!--右边-->
<div id="divRight">
<style type="text/css">
#divMsgInfo{
position:absolute;
width:90px;
height:300px;
font-size:9pt;
}
</style>
<script type="text/javascript">
var lastScrollY=0;
function heartBeat(){
diffY=document.documentElement.scrollTop;
percent=0.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("divMsgInfo").style.top=parseInt(document.getElementById("divMsgInfo").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
}
var timeright = window.setInterval("heartBeat()",1);
</script>
<div id="divMsgInfo" runat="server" style=" right:10px; top:120px;">
<img src ="left.gif" />
<div style="float:right; color:White"><a onclick="clearInterval(timeright);document.getElementById('divRight').innerHTML = ''" style="color:White; cursor:pointer">关闭</a></div>
</div>
</div>
<!--左边-->
<div id="divLeftFloat">
<style type="text/css">
#divMsgLeftInfo{
position:absolute;
width:90px;
height:318px;
font-size:9pt; }
</style>
<script type="text/javascript">
var lastScrollYLeft=0;
function heartBeatLeft()
{
diffYLeft=document.documentElement.scrollTop;
percent=0.1*(diffYLeft-lastScrollYLeft);
if(percent>0)
percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("divMsgLeftInfo").style.top=parseInt(document.getElementById("divMsgLeftInfo").style.top)+percent+"px";
lastScrollYLeft=lastScrollYLeft+percent; }
var timeleft = window.setInterval("heartBeatLeft()",1);
</script>
<div id="divMsgLeftInfo" style=" left:10px; top:120px;">
<a href="http://www.ispeak.cn" target="_blank">
<img border="0" src ="/Files/index/FloatImg/20101112115620528353991.png" /></a>
<div style="float:right; color:White">
<a onclick="clearInterval(timeleft);document.getElementById('divLeftFloat').innerHTML = ''" style="color:White; cursor:pointer">关闭</a></div>
</div> </div>
<!--底部-->
<div id="divBottomFloat">
<style type="text/css">
#divMsgBottomInfo{
position:absolute;
/*background:#eee;*/
width:330px;
height:188px;
font-size:9pt;
/* border-color:#442200;*/
/* border-color:#000000;*/
}
</style>
<script type="text/javascript">
var lastScrollYBottom=0;
function heartBeatBottom(){
var isIE = document.all && window.external;
bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(isIE){
docHeight = document.documentElement.clientHeight || document.body.clientHeight;
}
else{
docHeight = (document.body.clientHeight > document.documentElement.clientHeight)?document.documentElement.clientHeight:document.body.clientHeight;
}
diffYBottom=(docHeight - parseInt(document.getElementById("divMsgBottomInfo").offsetHeight,10)) + parseInt(bodyScrollTop, 10);
document.getElementById("divMsgBottomInfo").style.top=diffYBottom+"px";
}
var timebottom=window.setInterval("heartBeatBottom()",1);
</script>
<div id="divMsgBottomInfo" runat="server" style=" right:10px; top:500px;">
<div style="float:right; color:White"><a onclick="clearInterval(timebottom);document.getElementById('divBottomFloat').innerHTML = ''" style="color:White; cursor:pointer">关闭</a></div>
<img src ="/images/tmp2.jpg" style="width:330px; height:170px" />
</div>
</div>
</body>
</html>
你把图片路径改下 就好了。。。 --------------------编程问答-------------------- 谢谢ch656409110的解答,主要是实现如下的效果
刚初始化的时候,某DIV在页面中间展示并不锁定。向下拖动纵向滚动条,该DIV到达浏览器顶部,则该DIV锁定不动,下面的内容拖动。向上拖动纵向滚动条,当到达该DIV原来的位置,则不锁定,继续往上面拖动,DIV上面的内容也会显示归来
--------------------编程问答-------------------- 没有人来吗?
补充:Java , Web 开发