How to fix some content in a fixed position when scrolling HTML page
|
This article mainly introduces how some content in HTML pages can be fixed and not scrolled when scrolling, which is helpful for layout. Without further ado, the details are as follows: Effect screenshots:
Page source code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Page</title>
</head>
<body style="width: 900px; margin: 0px auto; line-height: 23px; padding: 10px;">
<div>
<div style="float: left; width: 120px;">
<div>
I will roll<br/>
Scrolling content area<br/>
Scrolling content area<br/>
Scrolling content area<br/>
</div>
<div id="div1" style="border: solid 1px gray; width: 90px; padding: 10px; background-color: #eff;">
I don't scroll<br/>
You look at me<br/><br/> I don't roll<br/>
You look at me<br/><br/> I don't roll<br/>
You look at me<br/><br/> I don't roll<br/>
Look at me<br/><br/>
</div>
</div>
<div style="float: right; width: 750px; border: solid 1px gray; padding: 10px;">
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssss I am the content ssss</span><br>
<span>ssssssssssssssss</span><br>
<span>sssssss I am the content sssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>sssssss I am the content sssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssss I am the content ssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssI am the contentssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssI am the contentssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssI am the contentssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssI am the contentssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssI am the contentssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssI am the contentssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssI am the contentssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssI am the contentssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssI am the contentssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssI am the contentssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssI am the contentssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssI am the contentssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssI am the contentssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssI am the contentssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssI am the contentssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>sssssssI am the contentssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br>
</div>
</div>
<script type="text/javascript">
function htmlScroll() {
var top = document.body.scrollTop || document.documentElement.scrollTop;
if (elFix.data_top < top) {
elFix.style.position = 'fixed';
elFix.style.top = 0;
elFix.style.left = elFix.data_left;
}
else {
elFix.style.position = 'static';
}
}
function htmlPosition(obj) {
var o = obj;
var t = o.offsetTop;
var l = o.offsetLeft;
while (o = o.offsetParent) {
t += o.offsetTop;
l += o.offsetLeft;
}
obj.data_top = t;
obj.data_left = l;
}
var oldHtmlWidth = document.documentElement.offsetWidth;
window.onresize = function () {
var newHtmlWidth = document.documentElement.offsetWidth;
if (oldHtmlWidth == newHtmlWidth) {
return;
}
oldHtmlWidth = newHtmlWidth;
elFix.style.position = 'static';
htmlPosition(elFix);
htmlScroll();
}
window.onscroll = htmlScroll;
var elFix = document.getElementById('div1');
htmlPosition(elFix);
</script>
</body>
</html>
This is the end of this article about how to keep some content in a fixed position when an HTML page scrolls. For more relevant HTML page scrolling content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
<<: Split and merge tables in HTML (colspan, rowspan)
>>: HTML+CSS box model example (circle, semicircle, etc.) "border-radius" is simple and easy to use
Recommend
Detailed steps for deploying Microsoft Sql Server with Docker
Table of contents 1 Background 2 Create a contain...
Press Enter to automatically submit the form. Unexpected discovery
Copy code The code is as follows: <!DOCTYPE ht...
CSS to achieve horizontal lines on both sides of the middle text
1. The vertical-align property achieves the follo...
Vue+Router+Element to implement a simple navigation bar
This project shares the specific code of Vue+Rout...
Detailed explanation of putting common nginx commands into shell scripts
1. Create a folder to store nginx shell scripts /...
mysql code to implement sequence function
MySQL implements sequence function 1. Create a se...
Linux sar command usage and code example analysis
1. CPU utilization sar -p (view all day) sar -u 1...
js to implement a simple bullet screen system
This article shares the specific code of native j...
MySQL multi-instance configuration solution
1.1 What is MySQL multi-instance? Simply put, MyS...
How to solve the problem of absolutely positioned elements mysteriously disappearing or being blocked in IE6/7
1. When the width of the adjacent floating layer o...
How to limit the number of records in a table in MySQL
Table of contents 1. Trigger Solution 2. Partitio...
How to create an Nginx server with Docker
Operating environment: MAC Docker version: Docker...
How to install PHP7.4 and Nginx on Centos
Prepare 1. Download the required installation pac...
Example implementation of checking whether an object is empty in native javascript
Table of contents What is native JavaScript A. Ch...
Make your text dance with the marquee attribute in HTML
Syntax: <marquee> …</marquee> Using th...