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

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

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

试着自己写了一个。

原理很简单，就是使用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>

HTML滚动时位置固定的更多相关文章

  1. html 页面太长滚动时，固定页面菜单标签，或者导航标签的位置，fixed/stickUp the position

    有时你曾经需要把页面上的某些东西当页面太长发滚动的时候保留置顶位置显示,或许你有别的实现方式,我这个仅供参考, 源代码: /*global $, jQuery, alert*/ (function ( ...

  2. iview的Affix组件滚动时没有按照预期固定

    业务场景 新建任务的页面,创建和重置按钮,页面没有滚动时,直接跟在内容下面:页面滚动时,固定于页面下方,不随内容进行滚动,以方便按钮的操作.效果如下: 问题以及解决办法 直接使用<Affix : ...

  3. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  4. Jquery DIV滚动至浏览器顶部位置固定

    获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 方法一: $(function() { v ...

  5. 使用 jQuery.Pin 垂直滚动时固定导航

    ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...

  6. Android 记录和恢复ListView滚动的位置的三种方法

    本文主要介绍记录和恢复listView滚动位置的3种方法(1)记录listView滚动到的位置的坐标(推荐)(2)记录listView显示在屏幕上的第一个item的位置(3)通知适配器数据改变. 有时 ...

  7. universal image loader在listview/gridview中滚动时重复加载图片的问题及解决方法

    在listview/gridview中使用UIL来display每个item的图片,当图片数量较多需要滑动滚动时会出现卡顿,而且加载过的图片再次上翻后依然会重复加载(显示设置好的加载中图片) 最近在使 ...

  8. 滚动时div的背景图片随之滚动

    在浏览一些网站时发现有一种效果是当滚动时看到某一DIV的背景也会随之滚动,如下: 当滚动时内容位置保持不变,但是内容后面的背景却在随着滚动.随之我通过审查元素看到了其是通过background-pos ...

  9. Android RecyclerView 滚动到中间位置

    最近看到QQ音乐的歌词每次滑动后都可以滚回到中间位置.觉得甚是神奇,打开开发者模式显示布局,发现歌词部分不是采用 android 控件的写的,应该是前端写的.于是,我想,能不能用 recyclerVi ...

随机推荐

  1. 云计算(3)-what is new in today's Cloud

    What is new in today's Cloud Four features new in today's Clouds 如果一个problem有以上4个features里面的一个或者多个,则 ...

  2. Composer的安装以及替换为国内镜像

    Composer的安装以及使用国内镜像 Composer 学习网址 Composer官网 https://getcomposer.org/ Composer中文网 http://www.phpcomp ...

  3. 并发编程大师系列之：CountDownLatch和Join

    业务场景描述:假设一条流水线上有三个工作者:worker1,worker2,worker3.有一个任务的完成需要他们三者协作完成,worker3可以开始这个任务的前提是worker1和worker2完 ...

  4. @EnableCircuitBreaker熔断超时机制

    客户端请求服务端的时候总是报超时,默认熔断机制是1S

  5. volatile相关知识

    C中的volatile变量是什么? 回答: 的易失性的关键字是类型限定符防止从编译器optimization.According至C标准的对象,具有挥发性限定类型可以以实施方式未知进行修改或具有其他未 ...

  6. selenium之python源码解读-expected_conditions

    一.expected_conditions 之前在 selenium之python源码解读-WebDriverWait 中说到,until方法中method参数,需要传入一个function对象,如果 ...

  7. Inellij idea创建javaWeb以及Servlet简单实现

    版权声明:本文为博主原创文章,未经博主允许不得转载. 准备:1. 安装jdk1.7 2. 安装tomcat1.8 一.创建并设置javaweb工程 1.创建javaweb工程File --> N ...

  8. 通过自定义属性获取指定checkbox是否选中

    $("input[conferid='"+conferid+"']").is(':checked'); $("input[conferid='1234 ...

  9. Mysql 双主--keepalived

    简介 编辑 Keepalived的作用是检测服务器的状态,如果有一台web服务器宕机,或工作出现故障,Keepalived将检测到,并将有故障的服务器从系统中剔除,同时使用其他服务器代替该服务器的工作 ...

  10. learning scala view collection

    The view method will create a non-strict version of the collection which means that the elements of ...