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

Reasons for the sudden drop in MySQL performance

Example code for implementing page floating box based on JS

Reasons for the sudden drop in MySQL performance

Examples of optimistic locking and pessimistic locking in MySQL

Docker image export, import and copy example analysis

Comprehensive website assessment solution

Example implementation of checking whether an object is empty in native javascript

Correct use of Vue function anti-shake and throttling

Analysis of parameter transfer process of driver module in Linux

MySQL 8.0 error The server requested authentication method unknown to the client solution

A detailed introduction to JavaScript primitive values and wrapper objects

How to implement interception of URI in nginx location

Recommend

MySQL 5.7.17 compressed package installation and configuration method graphic tutorial

Implementation of the login page of Vue actual combat record

MySQL query optimization using custom variables

ReactRouter implementation

Pure CSS to achieve cool neon light effect (with demo)

Vue component to realize carousel animation

Linux kernel device driver kernel debugging technical notes collation

Detailed explanation of the basic usage of the Linux debugger GDB

Optimization methods when Mysql occupies too high CPU (must read)

Detailed explanation of the mysql database LIKE operator in python

Use of MySQL official export tool mysqlpump

JS achieves five-star praise case

Detailed explanation of scheduled tasks and delayed tasks under Linux

Example of implementing a seamless infinite loop of background using CSS animation

Practical solution for Prometheus container deployment