当前位置:编程学习 > JAVA >>

如何实现滚动条向下拉到一定的程度,然后这层就一直占着不管滚动条如何向下拉都不动了的效果?

想实现和腾讯的如下效果,不过本人不会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 开发
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,