zoukankan      html  css  js  c++  java
  • HTML滚动时位置固定

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

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

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

    试着自己写了一个。

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

    <!DOCTYPE html>
    <html>
    <head>
        <title>无标题页</title>
    </head>
    <body style=" 900px; margin: 0px auto; line-height: 23px; padding: 10px;">
        <div>
            <div style="float: left;  120px;">
                <div>
                    滚动内容区域<br />
                    滚动内容区域<br />
                    滚动内容区域<br />
                    滚动内容区域<br />
                </div>
                <div id="div1" style="border: solid 1px gray;  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;  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>
  • 相关阅读:
    tomcat使用不同的jdk版本 liunx 装两个jdk
    接下来自己的研究对象
    钉钉小程序开发的所有坑
    java 在web应用中获取本地目录和服务器上的目录不一致的问题
    Python2.7更新pip:UnicodeDecodeError: 'ascii' codec can't decode byte 0xb7 in position 7: ordinal not in range(128)
    vue项目中禁止移动端双击放大,双手拉大放大的方法
    JZ56 删除链表中重复的结点
    JZ55 链表中环的入口结点
    JZ54 字符流中第一个不重复的字符
    JZ53 表示数值的字符串
  • 原文地址:https://www.cnblogs.com/wolfocme110/p/4025758.html
Copyright © 2011-2022 走看看