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

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

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

试着自己写了一个。

原理很简单，就是使用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. 服务如何配置JVM

    为了使JVM的资源利用更合理,往往需要手动设置JVM的初始值.下面将详细介绍不同环境下的JVM配置. 1.如果是应用程序,则:java -Xms800m -Xmx800m 你的类名 java -Xms ...

  2. selenium之python源码解读-WebDriverWait

    一.显示等待 所谓显示等待,是针对某一个特定的元素设置等待时间,如果在规定的时间内找到了该元素,就执行相关的操作,如果在规定的时间内没有找到该元素,在抛出异常 PS:注意显示等待和隐身等待的区别,隐身 ...

  3. 普通页面引入React(使用和不使用JSX)

    1. 不使用JSX 优点: 不用配置有关JSX的编译. 依赖语法: React.createElement(component/type, props, ...chilidren); //第一个参数可 ...

  4. PostgreSQL 不要使用kill -9 杀 Postgresq 用户进程

    转载:http://francs3.blog.163.com/blog/static/4057672720109854858308/ Postgresql 8.3.3 今天应用反映数据库很慢,有些SQ ...

  5. 万年历SQL Server中实现

    参照C#版万年历实现而做 http://www.cnblogs.com/txw1958/archive/2013/01/27/csharp-calendar.html 在sql server中实现公历 ...

  6. Oracle Linux 6.4 LVM中误删VG之恢复过程

    一.项目背景描述 1.OSS现网测试数据库因大量小事物频繁提交运行非常缓慢.经分析为DS3950存储所在磁盘I/O存在瓶颈,大量等待事件,性能受限.另外,开发同事没有优化意识,没将小事物做成批量提交方 ...

  7. 「CF375E」Red and Black Tree「树形DP」

    题意 给定一个结点颜色红或黑的树,问最少进行多少次交换黑.红结点使得每个红结点离最近的黑结点距离\(\leq x\). \(1\leq n \leq 500, 1 \leq x \leq 10^9\) ...

  8. 「CF235E」Number Challenge「莫比乌斯反演」

    一个结论:(从二维扩展来的,三维也是对的,证明可以考虑质因数分解) \[ d(ijk)=\sum_{i'|i}\sum_{j'|j}\sum_{k'|k}[\gcd(i',j')=1][\gcd(i' ...

  9. shiro 配置注解异常 java.lang.ClassNotFoundException: org.aspectj.util.PartialOrder$PartialComparable

    解决方案: pom 文件添加: <!-- 解决shiro注解(shiro 使用 aop) --> <dependency> <groupId>aspectj< ...

  10. python3编程基础之一：标识符

    每种编程语言都是需要处理数据的,需要变量.函数.类等,而这些都是通过名称访问的.因此,能够作为变量.函数.类等名称的字符串就是标识符.数据,是计算机进行运算的实体.标识符,用来标记的符号,它会指向一个 ...