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

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

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

试着自己写了一个。

原理很简单，就是使用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. hive 常用操作

    参考:https://www.cnblogs.com/jonban/p/10779938.html Hive 启动:hive 退出:hive>quit; show databases; use  ...

  2. PowerDesigner创建表 拷贝创建表语句 SQLSERVER创建数据库 使用查询 创建表 并且添加数据

    PowerDesigner创建表 : 1.双击打开PowerDesigner   2.双击打开Create model 3左键点击Model  types,再点击Physical    Data  m ...

  3. KindEditor3.x-自动上传Word图片功能.

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...

  4. Python3对时间模块的操作

    python中使用time和datetime来进行时间操作 import time import datetime # 获取时间戳 time.time() # 1544601181.549864 # ...

  5. Django系列（三）：单表操作

    1.ORM简介 MTV或者MTV框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这极大的减轻了开发人 ...

  6. yy

    sudo rm -rf /var/cache/apt/archives/python-catkin-pkg-modules_0.4.12-1_all.deb sudo rm -rf /var/cach ...

  7. Nut和nuTilda【翻译】

    翻译自:CFD-online 帖子地址:http://www.cfd-online.com/Forums/openfoam-solving/72176-nut-nutilda.html phile: ...

  8. 机器学习系列算法1：KNN

    思路:空间上距离相近的点具有相似的特征属性. 执行流程: •1. 从训练集合中获取K个离待预测样本距离最近的样本数据; •2. 根据获取得到的K个样本数据来预测当前待预测样本的目标属性值 三要素:K值 ...

  9. java把一段时间分成周，月，季度，年的时间段

    package com.mq.test.activeMQ; import java.text.DateFormat; import java.text.ParseException; import j ...

  10. Comet OJ - Contest #6 B.双倍快乐（二维最大上升子序列和）

    双倍快乐 题目描述 Illyasviel:"你想要最长不下降子序列吗?" star-dust:"好啊!" Illyasviel:"老板,给我整两个最长 ...