How to fix some content in a fixed position when scrolling HTML page

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

Nginx access log and error log parameter description

illustrate: There are two main types of nginx log...

4 Scanning Tools for the Linux Desktop

While the paperless world has not yet emerged, mo...

Detailed explanation of direct routing in cross-host communication of Docker containers

Overview As for the current default network of Do...

MySQL 5.7 installation and configuration tutorial under CentOS7 (YUM)

Installation environment: CentOS7 64-bit, MySQL5....

jQuery implements nested tab function

This article example shares the specific code of ...

Detailed steps for installing and configuring MySQL 8.0 on CentOS 7.4 64-bit

Step 1: Get the MySQL YUM source Go to the MySQL ...

How to install MySQL database on Ubuntu

Ubuntu is a free and open source desktop PC opera...

getdata table table data join mysql method

public function json_product_list($where, $order)...

Sample code for implementing mysql master-slave replication in docker

Table of contents 1. Overview 1. Principle 2. Imp...

How to implement an array lazy evaluation library in JavaScript

Table of contents Overview How to achieve it Spec...

Detailed explanation of how Nginx solves the problem of cross-domain access to front-end resources

After being tortured by the front-end cross-domai...

How to configure the maximum number of files that can be opened by each Nginx process

1. Check the maximum number of open files in the ...

The difference between shtml and html

Shtml and asp are similar. In files named shtml, s...

Docker-compose steps to configure the spring environment

Recently, I need to package the project for membe...

What does the legendary VUE syntax sugar do?

Table of contents 1. What is syntactic sugar? 2. ...