HTML页面滚动时部分内容位置固定不滚动的实现


Posted in HTML / CSS onApril 14, 2021

本文主要介绍了HTML页面滚动时部分内容位置固定不滚动,对布局有一定的帮助作用,废话不多说,具体如下:

效果截图:

HTML页面滚动时部分内容位置固定不滚动的实现

页面源代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <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;">
            我不滚动<br/>
            你看我<br/><br/> 我不滚动<br/>
            你看我<br/><br/> 我不滚动<br/>
            你看我<br/><br/> 我不滚动<br/>
            你看我<br/><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>ssss我是内容ssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>sssssss我是内容sssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>sssssss我是内容sssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssss我是内容ssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</span><br>
        <span>ssssssssssssssss</span><br>
        <span>ssssssssssssssss</span><br><span>ssssss我是内容ssssssssss</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 页面滚动时部分内容位置固定不滚动的实现的文章就介绍到这了,更多相关HTML 页面滚动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 #HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
CSS3 实现的图片悬停的切换按钮
Apr 13 #HTML / CSS
纯CSS实现酷炫的霓虹灯效果
CSS3实现三角形不断放大效果
css3实现背景图片颜色修改的多种方式
Apr 13 #HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 #HTML / CSS
You might like
PHP中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
python装饰器练习题及答案
2019/11/01 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
.net面试题
2016/09/17 面试题
国际会议邀请函范文
2014/01/16 职场文书
公司出纳岗位职责
2015/03/31 职场文书
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL