Fixed with absolute

最新推荐文章于 2025-09-13 09:06:35 发布

weixin_34221112

最新推荐文章于 2025-09-13 09:06:35 发布

阅读量133

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：https://segmentfault.com/a/1190000014677668

本文介绍了如何使用浏览器的布局属性，如offsetWidth、offsetHeight等，实现元素的固定位置效果及滚动进度显示功能。通过具体代码示例展示了如何计算元素的位置和尺寸，以及如何根据页面滚动来更新元素的位置。

A few concepts

offsetWidth: gives you the width the element takes up in pixels.
offsetHeight: gives you the height the element takes up in pixels.
clientWidth: gives you the size of the space inside the element, ignoring border width.
clientHeight: gives you the size of the space inside the element, ignoring border height.
pageXOffset: returns the number of pixels scrolled along the horizontal axis (left and right).
pageYOffset: returns the number of pixels the document is currently scrolled along the vertical axis, with a value of 0.0 indicating that the top edge of the Document is currently aligned with the top edge of the window's content area.
getBoundingClientRect: returns an object with top, bottom, left, and right properties, indicating the pixel positions of the sides of the element relative to the top left of the viewport. If you want them relative to the whole document, you must add the current scroll position, which you can find in the pageXOffset and pageYOffset bindings.
innerWidth: width (in pixels) of the browser window viewport including, if rendered, the vertical scrollbar.
innerHeight: height (in pixels) of the browser window viewport including, if rendered, the horizontal scrollbar.
scrollWidth: a measurement of the width of an element's content, including content not visible on the screen due to overflow.
scrollHeight: a measurement of the height of an element's content, including content not visible on the screen due to overflow.

Practice

Let's put together the above concepts to achieve fixed position effect with absolute position, as well as scrolling progress functionality.

// fixed.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Fixed</title>
    <style>
        body {
            margin: 0;
            position: relative;
            /* extend the body so that it can scroll to see the fixed effect */
            width: 2000px;
            height: 2000px;
        }
        #greet {
            width: 100px;
            height: 100px;
            line-height: 100px;
            padding: 5px;
            text-align: center;
            border: 2px solid green;
            position: absolute;
        }
        .progress {
            text-align: center;
            border: 1px solid black;
            /* fixed for progress as we only want to demonstrate the usage of scrollWidth and page offset for progress functionality */
            position: fixed;
            left: 50%;
            padding: 10px;
            /* center the progress info divs */
            transform: translateX(-50%);
        }
        #xprogress{
            top: 0;
        }
        #yprogress{
            top: 50px;
        }
    </style>
</head>
<body>
    <div id="greet"> Hello World </div>
    <div id="xprogress" class="progress">horizontal: 0</div>
    <div id="yprogress" class="progress">vertical: 0</div>
    <script>
        let node = document.querySelector('#greet');
        console.log(JSON.stringify({
            offsetWidth: node.offsetWidth, // 114 - with padding and border
            offsetHeight: node.offsetHeight, // 114 - with padding and border
            clientWidth: node.clientWidth, // 110 - with padding but without border
            clinetHeight: node.clientHeight, // 110 - with padding but without border
            innerWidth: innerWidth, // 1670, vary based on your setting
            innerHeight: innerHeight // 700, vary based on your setting
        }, null, '\t'));
        node.style.left = (innerWidth / 2 - node.offsetWidth / 2) + 'px';
        node.style.top = (innerHeight / 2 - node.offsetHeight / 2) + 'px';

        // for fixed div
        document.addEventListener('scroll', function() { // listen to scroll event, adjust the position based on the scroll infomation
            let rec = node.getBoundingClientRect();
            let {top, left, width, height} = rec; // top and left is based on viewport, need to take scroll offset into account
            console.log(JSON.stringify({
                width,
                height,
                top,
                left,
                pageYOffset,
                pageXOffset
            }, null, '\t'));
            node.style.left = (pageXOffset + innerWidth / 2 - width / 2) + 'px';
            node.style.top = (pageYOffset + innerHeight / 2 - height / 2) + 'px';
        });

        let yMax = document.body.scrollHeight - innerHeight;
        let xMax = document.body.scrollWidth - innerWidth;
        // for progress bar
        document.addEventListener('scroll', function () {
            let xProgress = document.querySelector('#xprogress');
            let yProgress = document.querySelector('#yprogress');

            xProgress.textContent = `horizontal: ${pageXOffset * 100/ xMax}%`;
            yProgress.textContent = `vertical: ${pageYOffset * 100 / yMax}%`;
        });
    </script>
</body>
</html>

Code Sample

Reference

Eloquent JavaScript

Notice

If you want to follow the latest news/articles for the series of reading notes, Please 「Watch」to Subscribe.