Implementation code of the floating layer fixed on the right side of the web page

Copy code

The code is as follows:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body
{
margin:0px;
padding:0px;
margin-top:60px;
margin-bottom:60px;
}
#div_nav_zone_right
{
position:absolute;
float:right;
z-index:3;
width:120px;
height:100px;
right:0px;
top: 332px;
background-color:#999;
}
#div_nav_zone_right_bottom
{
position:absolute;
float:right;
z-index:3;
width:120px;
height:100px;
right:0px;
top: 532px;
background-color:#CCC;
}
#div_ul
{
position:fixed;
height:50px;
}
ul,li
{
margin:0px;
}
li
{
list-style:none;
}
</style>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript">
$(function()
{
moveDiv(); //Page initialization execution
$(window).scroll(function(){
moveDiv();
moveRightBottomDiv();
});
});
//Center right side
function moveDiv()
{
var scrollTop = $(document).scrollTop(); //The height of the top of the scroll bar hidden
var clientHeight = $(window).height(); //Height of web page content area
//Set the position to
var hei = $("#div_nav_zone_right").css("height");
hei = hei.replace("px","");
var newPosY = scrollTop + (clientHeight-hei)/2;
$("#div_nav_zone_right").css("top",newPosY+"px");
}
//100 pixels below the right side
function moveRightBottomDiv()
{
var scrollTop = $(document).scrollTop(); //The height of the top of the scroll bar hidden
var clientHeight = $(window).height(); //Height of web page content area
//Set the position to
var hei = $("#div_nav_zone_right_bottom").css("height");
hei = hei.replace("px","");
var newPosY = clientHeight + scrollTop - hei - 100;
$("#div_nav_zone_right_bottom").css("top",newPosY+"px");
}
</script>
</head>
<body>
1 <br/>2 <br/>3 <br/>4 <br/>5 <br/>6 <br/>7 <br/>8 <br/>9 <br/>10 <br/>
<p>sd</p>
<p>f</p>
<p> </p>
<p>ads</p>
<p>f</p>
<p>ads</p>
<p>
<input type="button" name="button" id="button" value="Submit" onclick="clk()" />
</p>
<p>ad</p>
<p>sf AS
D
as
d
S
D
</p>
<p> </p>
<p>ads</p>
<p>f</p>
<p>ads</p>
sad
S
D
a
d
A
D
a

<div id="div_nav_zone_right" >
<ul>
<li>Sidebar Menu 1</li>
<li>Sidebar Menu 2</li>
<li>Sidebar Menu 3</li>
<li>Sidebar Menu 4</li>
</ul>
</div>

<div id="div_nav_zone_right_bottom" >
<ul>
<li>Sidebar Menu 1</li>
<li>Sidebar Menu 2</li>
<li>Sidebar Menu 3</li>
<li>Sidebar Menu 4</li>
</ul>
</div>
</body>
</html>

<<: The table table uses: nth-child() to achieve alternate color change and alignment

>>: Complete steps to install MySQL 5.5 on CentOS

Detailed explanation of the difference between $router and $route in Vue

After mybatis-plus paging parameters are passed in, the sql where condition does not have limit paging information operation

I spent almost two hours trying various methods. ...

Implementation code of the floating layer fixed on the right side of the web page

Detailed explanation of the difference between $router and $route in Vue

Install and configure ssh in CentOS7

A simple way to change the password in MySQL 5.7

Detailed explanation of how to use relative paths in HTML to obtain files at all levels of directories

Alibaba Cloud applies for a free SSL certificate (https) from Cloud Shield

How to get the dynamic number of remaining words in textarea

Practical tutorial on modifying MySQL character set

Detailed explanation of MySQL startup options and system variables examples

Two ways to use IIS to call X-Forwarded-For Header (XFF) to record the visitor's real IP

How to quickly log in to MySQL database without password under Shell

Recommend

Detailed explanation of JavaScript primitive data type Symbol

Input file custom button beautification (demo)

The latest super detailed VMware virtual machine download and installation graphic tutorial

Sample code for implementing dynamic glowing special effects animation of circles using pure CSS3

The use of v-model in vue3 components and in-depth explanation

The whole process of configuring reverse proxy locally through nginx

JavaScript canvas realizes dynamic point and line effect

CSS realizes the mask effect when the mouse moves to the image

After mybatis-plus paging parameters are passed in, the sql where condition does not have limit paging information operation

Implementation of react loop data (list)

Detailed explanation of the working principle and usage of the Docker image submission command commit

Use pictures to realize personalized underline of hyperlinks

How to distinguish MySQL's innodb_flush_log_at_trx_commit and sync_binlog

How to install Apache service in Linux operating system

Setting up a proxy server using nginx