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 05 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
Jan 09 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
在HTML中引入CSS的几种方式介绍
Dec 06 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产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
python中requests小技巧
2017/05/10 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
Python 切分数组实例解析
2019/11/07 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
Python pip 常用命令汇总
2020/10/19 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
html5菜单折纸效果
2014/04/22 HTML / CSS
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
康拓普公司Java笔面试
2016/09/23 面试题
应届毕业生求职信范文分享
2013/12/26 职场文书
师范教师毕业鉴定
2014/01/13 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
关于安全演讲稿
2014/05/09 职场文书
2015年资料员工作总结
2015/04/25 职场文书
民主生活会意见
2015/06/05 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
python读取mnist数据集方法案例详解
2021/09/04 Python
室外天线与收音机天线杆接合方法
2022/04/05 无线电