Example code for implementing page floating box based on JS

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

Recommend

jQuery implements shopping cart function

This article example shares the specific code of ...

Detailed installation and use of virtuoso database under Linux system

I've been researching some things about linke...

Sample code for implementing login and registration template in Vue

Template 1: login.vue <template> <p clas...

The viewport in the meta tag controls the device screen css

Copy code The code is as follows: <meta name=&...

Vue implements websocket customer service chat function

This article mainly introduces how to implement a...

27 Linux document editing commands worth collecting

Linux col command The Linux col command is used t...

Detailed explanation of MySQL Explain

In daily work, we sometimes run slow queries to r...

MySQL index leftmost principle example code

Preface I was recently reading about MySQL indexe...

The first step in getting started with MySQL database is to create a table

Create a database Right click - Create a new data...

MySQL encryption and decryption examples

MySQL encryption and decryption examples Data enc...

jQuery plugin to achieve carousel effect

A jQuery plugin every day - jQuery plugin to impl...

Nginx installation error solution

1. Unzip nginx-1.8.1.tar.gz 2. Unzip fastdfs-ngin...

How MLSQL Stack makes stream debugging easier

Preface A classmate is investigating MLSQL Stack&...

Detailed explanation of how to use eslint in vue

Table of contents 1. Description 2. Download rela...

Docker exposes port 2375, causing server attacks and solutions

I believe that students who have learned about th...