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 2014-10-15 10:16 狼来了阅读(3468) 评论(0) 编辑收藏举报