HTML页面滚动时一部分内容位置固定不动不滚动的完成

最新推荐文章于 2024-04-25 15:04:32 发布

云南仟龙Mark

最新推荐文章于 2024-04-25 15:04:32 发布

阅读量3.7k

点赞数

文章标签： html css

原文链接：https://blog.51cto.com/u_15111999/3569745

版权

本文关键介绍了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 =" http://www.qlyl1688.com/products/ycxsyd.html "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 页面滚动内容请搜索脚本之家之前的文章或再次访问下边的有关文章，期待大伙儿之后多多的适用脚本之家！

云南仟龙Mark

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
HTML页面滚动时一部分内容位置固定不动不滚动的完成

本文关键介绍了HTML 页面滚动时一部分內容部位固定不动不滚动的完成，原文中根据实例编码介绍的十分详尽，对大伙儿的学习或是工作中具备一定的参照学习使用价值，必须的小伙伴们下边伴随着我来一起学习学习吧文中关键介绍了HTML页面滚动时一部分內容部位固定不动不滚动，对合理布局有一定的协助功效，废话不多说，开始：页面源代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title
复制链接

扫一扫