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

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

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

试着自己写了一个。

原理很简单，就是使用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. windows下递归删除指定文件和文件夹

    //删除文件del *.后缀 /s//删除文件夹for /r 目录 %a in (文件夹名\) do @if exist "%a" rd /s/q "%a"

  2. RMQ问题【模板】

    概念 RMQ 是英文 Range Maximum/Minimum Query 的缩写,表示区间最大(最小)值. 解决 RMQ 问题的主要方法有两种,分别是 ST 表和线段树.本文主要讲 ST 表. S ...

  3. Longest Continuous Increasing Subsequence

    Description Give an integer array,find the longest increasing continuous subsequence in this array. ...

  4. 原生JS实现购物车全选多选按钮功能

    对于JS初学者来说,一个完整的购物车实现还是挺难的,逻辑功能挺多.写出完整功能,能提升不少JS基础,下面实现购物车全选多选按钮功能: 首先HTML及CSS部分: <style> table ...

  5. B5G/6G新技术

    组网技术:由自组织向自支撑发展:卫星通信(大尺度衰落)采用DTN组网. 多址技术:非正交多址:Polar-SCMA:交织多址:IDMA. 信道技术:多径分集.多普勒分集.OFDM的CP用ZP替代.设计 ...

  6. 007——转载-MATLAB读取文件夹下的文件名

    (一)参考文献:https://blog.csdn.net/liutaojia/article/details/84899923 (二)第一步:获取文件夹下某类型数据的所有文件名 主要包括三个步骤: ...

  7. [Luogu] 受欢迎的牛

    https://www.luogu.org/problemnew/show/P2341 Tarjan 缩点 + 判断出度 #include <iostream> #include < ...

  8. 2018 Benelux Algorithm Programming Contest (BAPC 18)

    目录 Contest Info Solutions A A Prize No One Can Win B Birthday Boy C Cardboard Container D Driver Dis ...

  9. HTML与CSS网页开发基础

    HTML标记语言 HTML文件的创建 整个编译器,或者记事本,文件扩展名改为.htm或者.html HTML文档结构 <html>标记:开头,所有HTML文件以<html>标记 ...

  10. Cogs 731. [网络流24题] 最长递增子序列(最大流)

    [网络流24题] 最长递增子序列 ★★★☆ 输入文件:alis.in 输出文件:alis.out 简单对比 时间限制:1 s 内存限制:128 MB «问题描述: 给定正整数序列x1,-, xn. ( ...