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

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

Recommend

Building .NET Core 2.0 + Nginx + Supervisor environment under Centos7 system

1. Introduction to Linux .NET Core Microsoft has ...

How to uninstall and reinstall Tomcat (with pictures and text)

Uninstall tomcat9 1. Since the installation of To...

Responsive Web Design Learning (3) - How to improve the performance of web pages on mobile devices

Preface Mobile devices have higher requirements f...

8 commands to effectively manage processes in Linux

Preface The role of process management: Determine...

Pure CSS3 code to implement a running clock

Operation effectCode Implementation html <div ...

Windows cannot start MySQL service and reports error 1067 solution

Suddenly when I logged into MySQL, it said that a...

A Brief Analysis of CSS Selector Grouping

Selector Grouping Suppose you want both the h2 el...

Example of automatic import method of vue3.0 common components

1. Prerequisites We use the require.context metho...

MySQL infrastructure tutorial: detailed explanation of the query statement execution process

Preface I have always wanted to know how a SQL st...

Detailed explanation of gantt chart draggable and editable (highcharts can be used for vue and react)

Preface Excel is powerful and widely used. With t...

Implementation of Nginx configuration and access to local static resources in Mac environment

Sometimes local development requires debugging of...

Implementation of element shuttle frame performance optimization

Table of contents background Solution New Questio...

Basic reference types of JavaScript advanced programming

Table of contents 1. Date 2. RegExp 3. Original p...

How to quickly clean up billions of data in MySQL database

Today I received a disk alarm exception. The 50G ...

A brief discussion on JavaScript shallow copy and deep copy

Table of contents 1. Direct assignment 2. Shallow...