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

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

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

试着自己写了一个。

原理很简单，就是使用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. ajax向服务器发出get和post请求

    假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个form表单里用来实现form提交,第二个输入框是单独的.没有包含在form里,下面就用这两个输入框来学习下j ...

  2. keil mdk 菜单 “project” 崩溃问题解决

    今天发现我的 Keil MDK5.28z win10系统上面,点击 Project 菜单立即崩溃.网上找到了解决方法 简单粗暴的处理方法:重装keil ,但是依然点击 project 崩溃. 通过搜索 ...

  3. 51 arm x86 的大小端记录

    51 是大端模式 arm的cortex m 默认小端,可以设置大端 x86是小端 大端模式:低位字节存在高地址上,高位字节存在低地址上  小端模式:高位字节存在高地址上,低位字节存在低地址上

  4. 微信小程序 组件事件传递

    父组件向子组件传递初始数据,当子组件点击以后可以triggerEvent自定义事件,父组件执行自定义事件,重新请求数据并传给子组件 /* 子组件 */ <view> <view bi ...

  5. DOM(innerHTML和className)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. php面向对象之$this->用法简述

    在成员方法中,调用成员方法的方法是对象名加方法名,格式就是“对象名->方法名”.但是在定义类的时候,我们往往不知道对象名是什么,所以就没法用对象名,这时,我们就要用到伪变量$this. 什么是$ ...

  7. 51nod P1354 选数字 题解

    每日一题 day8 打卡 Analysis 背包+离散化 这题是我们一次模拟赛的T2,结果我的暴力全TLE了. 关键是如果将两个因数的乘积离散化在因数数组中之后等于这个乘积本身,说明a[j]*in离散 ...

  8. 强大的捉包工具Fiddler

    Fiddler2出现 creation of the root certificate was not successful 错误 http://www.zhaokeli.com/Article/63 ...

  9. 富文本编辑器+可粘贴word内容

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? 我希望打开文档doc直接复制粘贴到富文本编辑器,直接发布 感觉这个似乎很困难 ...

  10. 使用scala通过JNI技术调用c++代码

    scala代码编写 Sample1.scala class Sample1 { // --- Native methods @native def intMethod(n: Int): Int def ...