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 响应式媒体查询的示例代码
Sep 25 HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 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之COOKIE支持详解
2010/09/20 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
php 的反射详解及示例代码
2016/08/25 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
Python线性方程组求解运算示例
2018/01/17 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
外企求职信范文分享
2013/12/31 职场文书
给小学生的新年寄语
2014/04/04 职场文书
我的小天地教学反思
2014/04/30 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
2015年校长新年寄语
2014/12/08 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
导游词之峨眉山
2019/12/16 职场文书
python中pandas对多列进行分组统计的实现
2021/06/18 Python