当前位置: 首页 > news >正文

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

页面源代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!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我是@ www.xuepai.net内容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 @ www.haoshilao.net</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>

 

http://www.jsqmd.com/news/201032/

相关文章:

  • 基于SpringBoot的学生宿舍管理系统源码设计与文档
  • SQL必会必知整理-17-插入数据
  • 基于SpringBoot的音乐点播网站源码设计与文档
  • 【计算机毕业设计案例】基于深度学习的web网页html版通过CNN卷积神经网络对盆栽识别
  • 20252803《Linux内核原理与分析》第12周作业-Linux系统监控实战(系统安全实验) - 教程
  • 基于SpringBoot的可追溯果园生产过程管理系统(毕业设计项目源码+文档)
  • HTML中的表单Form实现居中
  • 强烈安利8个AI论文平台,MBA高效写作必备!
  • try111
  • 基于Springboot的克州旅游网站的设计与实现(毕业设计项目源码+文档)
  • 考虑充电负荷空间可调度特性的分布式电源与电动汽车充电站联合配置方法Matlab实现
  • 基于SpringBoot的信访管理系统毕业设计项目源码
  • 从1000并发到10万+:充电桩平台的效率革命,靠的是这三个核心动作
  • HTML通过表单实现酒店筛选功能代码
  • 基于SpringBoot的协同过滤推荐算法的线上安全教育平台毕业设计项目源码
  • 【无人机控制】同轴倾转旋翼三轴无人机的非线性建模和控制,混合反步滑模分层控制方案以及EKF和UKF估计附matlab代码
  • 2026最新瑜伽面料品牌top5推荐!服务覆盖广东广州义乌福建等地优质公司及厂家选择指南,功能性与品质兼具助力运动服饰升级 - 全局中转站
  • 想超越竞品的AI搜索排名,该选什么样的AI GEO优化公司? - 奇林智媒GEO
  • 分时电价环境下用户负荷需求响应分析方法Matlab代码
  • vue 如何给任意组件使用右键菜单,全局右键菜单
  • 本地私有知识库新选择:访答的优势解析
  • 开发测试人员必备网站整合:一步到位,果断收藏了!
  • Spring-boot读书笔记一where is rating() from
  • 计算机深度学习毕设实战-基于卷神经网络的web网页html版通过CNN卷积神经网络对盆栽识别
  • 计及需求响应和电能交互的多主体综合能源系统主从博弈优化调度策略Matlab代码
  • docker的常用命令
  • 少儿编程培训哪家好:机构详细对比与推荐 - 品牌测评鉴赏家
  • html+css实现赛博朋克风格按钮代码
  • 港口集装箱起重机防摇辅助系统
  • 深度学习计算机毕设之基于python机器学习web网页html版通过CNN卷积神经网络对盆栽识别