随笔 - 432  文章 - 0  评论 - 15  阅读 - 63万

HTML滚动时位置固定

现在显示器一般都是宽屏,网页两端常常会留白。

两边可能会放一些推荐、标签或是导航什么的辅助模块。

现在有的网站页面内容过长时,用户将滚动条向下拉时,拉到一定程度,左右两侧的辅助模块就会固定在指定位置,不随滚动条滚动。这个的体验很好。

试着自己写了一个。

原理很简单,就是使用JS计算当滚动条位置大于元素显示位置时,将元素设置为 position:fixed; 设置好top,left这样就固定好位置了。

 

复制代码
<!DOCTYPE html>
<html>
<head>
    <title>无标题页</title>
</head>
<body style="width: 900px; margin: 0px auto; line-height: 23px; padding: 10px;">
    <div>
        <div style="float: left; width: 120px;">
            <div>
                滚动内容区域<br />
                滚动内容区域<br />
                滚动内容区域<br />
                滚动内容区域<br />
            </div>
            <div id="div1" style="border: solid 1px gray; width: 90px; padding: 10px; background-color: #eff;">
                fix内容区域<br />
                fix内容区域<br />
                fix内容区域<br />
                fix内容区域<br />
                fix内容区域<br />
                fix内容区域<br />
                fix内容区域<br />
                fix内容区域<br />
                fix内容区域<br />
                fix内容区域<br />
                fix内容区域<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>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</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>
复制代码

 

posted on   狼来了  阅读(3481)  评论(0编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示