Implementation of fixed position of some contents without scrolling when scrolling HTML pages

Time:2021-7-28

This paper mainly introduces that some content positions are fixed without scrolling when scrolling HTML pages, which is helpful for layout. There is no more nonsense, as follows:

Effect screenshot:

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 can scroll < br / >
            Scroll content area < br / >
            Scroll content area < br / >
            Scroll content area < br / >
        </div>
        <div id="div1" style="border: solid 1px gray; width: 90px; padding: 10px; background-color: #eff;">
            I don't scroll < br / >
            Look at me < br / > < br / > I don't scroll < br / >
            Look at me < br / > < br / > I don't scroll < br / >
            Look at me < br / > < br / > I don't scroll < 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 content SSSS < / span > < br >
        <span>ssssssssssssssss</span><br>
        <span>Sssssssssssssssssssssssss < / span > < br >
        <span>ssssssssssssssss</span><br>
        <span>Sssssssssssssssssssssssss < / span > < br >
        <span>ssssssssssssssss</span><br>
        <span>Ssssssssssssssssss < / span > < br >
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>Ssssssssssssssssss < / span > < br >
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>Ssssssssssssssssss < / span > < br >
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>Ssssssssssssssssss < / span > < br >
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>Ssssssssssssssssss < / span > < br >
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>Ssssssssssssssssss < / span > < br >
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>Ssssssssssssssssss < / span > < br >
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>Ssssssssssssssssss < / span > < br >
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>Ssssssssssssssssss < / span > < br >
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>Ssssssssssssssssss < / span > < br >
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>Ssssssssssssssssss < / span > < br >
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>Ssssssssssssssssss < / span > < br >
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>Ssssssssssssssssss < / span > < br >
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>Ssssssssssssssssss < / span > < br >
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>Ssssssssssssssssss < / span > < br >
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>Ssssssssssssssssss < / span > < br >
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>Ssssssssssssssssss < / 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 the implementation of fixed content position without scrolling when scrolling HTML pages. For more relevant scrolling content of HTML pages, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!