基于JS實現(xiàn)頁面懸浮框的實例代碼

更新時間：2021年12月24日 10:17:49 作者：miaoying

這篇文章主要介紹了基于JS實現(xiàn)頁面懸浮框的實例代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

當滾動條下拉時,懸浮框位置不變,主要是 position:fixed;樣式的作用.

當下拉到一定程度,接近footer時,我用js控制div消失,往上拉滾動條時又顯示.

<!DOCTYPE html> 
<html> 
<head>
<title></title>
<style type="text/css">
.div1 {
    height:2000px;
}
.div2 {
    width:100%;
    height:35px;
    background-color:#3399FF;
    margin-top:100px;
}
.div2_1{
    position:fixed;
    width:100%;
    height:35px;
    z-index:999;
    background-color:#3399FF;
    top:0px;
    _position:absolute;
    _bottom:auto;
    _top:expression(eval(document.documentElement.scrollTop));
}
 .div2_2
    {
        display:none;
    }

 
</style>
<script type="text/javascript">
window.onscroll=function(){ 
    var t=document.documentElement.scrollTop||document.body.scrollTop;  
    var div2=document.getElementById("div2"); 
    if(t>= 100){ 
        div2.className = "div2_1";
    }else{
        div2.className = "div2";
    } 
}
</script>
</head>
<body>
<div class="div1">
    <div id="div2" class="div2"></div>
</div>
</body>
</html>

補充：JavaScript實現(xiàn)右側懸浮框

HTML代碼：

<body>
  <div id="div1">
  </div>
</body>

css代碼：

#div1{
    height:150px;
    width:100px;
    background:red;    
    position:absolute;
    right:0px;
    bottom:0px;
}
body{
    height:2000px;
}

javascript代碼

//當窗體滾動的時候滴呀
  window.onscroll=function (){
      var obj=document.getElementById("div1");
      //考慮到瀏覽器的兼容性滴呀(被卷去的高度)
      var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
                    //瀏覽器可視區(qū)域的高度+物體自身的高度+被卷曲的高度
     // obj.style.top=document.documentElement.clientHeight-obj.offsetHeight+scrollTop+'px';
    //var targetLen=document.documentElement.clientHeight-obj.offsetHeight+scrollTop;
    //move(targetLen);
    //這樣我們就完成了基本的人物我滴
    //方式二：結果他是要抖動滴呀
    //var targetLen=(document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop;
    //move(targetLen);
    var targetLen=parseInt((document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop);
    move(targetLen);
    //這樣我們的基本功能算是實現(xiàn)了滴呀
  }
  //這里我們倆加上一個緩沖運動滴呀，這樣才方便我們去這些事情滴呀
  var Timer=null;
  function move(iTarget){
      clearInterval(Timer);//先清除
      var obj=document.getElementById("div1");
      Timer=setInterval(function (){ //距離上面物體的距離滴呀
           var speed=(iTarget-obj.offsetTop)/4;
           speed=speed>0?Math.ceil(speed):Math.floor(speed);
           //先獲取我們的速度滴呀
           if(obj.offsetTop==iTarget){
               clearInterval(timer); //到達目的之后，我們就清除元素滴呀
           }else{
               obj.style.top=obj.offsetTop+speed+'px';
           }
      },30)
      //來進行我們餓緩沖運動滴呀
  }

到此這篇關于基于JS實現(xiàn)頁面懸浮框的實例代碼的文章就介紹到這了,更多相關js頁面懸浮框內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: