Example code for implementing page floating box based on JS

When the scroll bar is pulled down, the floating box remains in the same position, mainly due to position:fixed; style.

When you scroll down to a certain extent and get close to the footer, I use js to control the div to disappear, and it will appear again when you scroll up.

<!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>

Supplement: JavaScript to implement the floating box on the right

HTML code:

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

CSS code:

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

JavaScript code

//When the form scrolls window.onscroll=function (){
      var obj = document.getElementById("div1");
      // Considering the browser compatibility (the height of the scroll)
      var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
                    //The height of the browser's visible area + the object's own height + the curled height // obj.style.top = document.documentElement.clientHeight-obj.offsetHeight+scrollTop+'px';
    //var targetLen=document.documentElement.clientHeight-obj.offsetHeight+scrollTop;
    //move(targetLen);
    //In this way, we have completed the basic character. //Method 2: The result is that he will shake. //var targetLen=(document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop;
    //move(targetLen);
    var targetLen = parseInt((document.documentElement.clientHeight)/2-obj.offsetHeight+scrollTop);
    move(targetLen);
    //This way our basic functions are realized.}
  //Here we add a buffer movement, so that it is convenient for us to do these things var Timer = null;
  function move(iTarget){
      clearInterval(Timer); //Clear first var obj=document.getElementById("div1");
      Timer=setInterval(function (){ //The distance from the object above var speed=(iTarget-obj.offsetTop)/4;
           speed=speed>0?Math.ceil(speed):Math.floor(speed);
           //Get our speed first if(obj.offsetTop==iTarget){
               clearInterval(timer); //After reaching the destination, we clear the element}else{
               obj.style.top=obj.offsetTop+speed+'px';
           }
      },30)
      //Let's do our buffering exercise}

This concludes this article about the example code for implementing a page floating box based on JS. For more relevant js page floating box content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

js to achieve the effect of mouse suspension frame
js text exceeds the length and is replaced by an ellipsis. When the mouse is hovered, an example is displayed in a floating box.
Write a floating box that can be automatically hidden using js and css
JS realizes the floating box effect on the right

<<: How to use CURRENT_TIMESTAMP in MySQL

>>: Node+Express test server performance