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

Detailed explanation of the Sidecar mode in Docker Compose

Table of contents What is Docker Compose Requirem...

How to add Nginx to system services in CentOS7

Introduction After compiling, installing and solv...

Sample code for implementing login and registration template in Vue

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

How to get the dynamic number of remaining words in textarea

I encountered a case at work that I had never wri...

MySQL index usage monitoring skills (worth collecting!)

Overview In a relational database, an index is a ...

How to delete the container created in Docker

How to delete the container created in Docker 1. ...

Solution to the problem of two slashes // appearing after the domain name when nginx is configured for domain name access

I rewrote my personal website recently. I bought ...

Usage of mysql timestamp

Preface: Timestamp fields are often used in MySQL...

Detailed explanation of Frp forced redirection to https configuration under Nginx

Because the router at home forced to reduce the b...

How to disable ads in the terminal welcome message in Ubuntu Server

If you are using the latest Ubuntu Server version...

JavaScript implements circular progress bar effect

This article example shares the specific code of ...

Detailed explanation of mysql record time-consuming sql example

mysql records time-consuming sql MySQL can record...

Detailed explanation of Linux host name modification command

Linux change hostname command 1. If you only need...

A brief talk about MySQL semi-synchronous replication

Introduction MySQL achieves high availability of ...

Solution to the failure of 6ull to load the Linux driver module

Table of contents 0x01 Failed to load the driver ...