HTML滚动时位置固定

现在显示器一般都是宽屏,网页两端常常会留白。

两边可能会放一些推荐、标签或是导航什么的辅助模块。

现在有的网站页面内容过长时,用户将滚动条向下拉时,拉到一定程度,左右两侧的辅助模块就会固定在指定位置,不随滚动条滚动。这个的体验很好。

试着自己写了一个。

原理很简单,就是使用JS计算当滚动条位置大于元素显示位置时,将元素设置为 position:fixed; 设置好top,left这样就固定好位置了。

 

<!DOCTYPE html>
<html>
<head>
    <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;">
                fix内容区域<br />
                fix内容区域<br />
                fix内容区域<br />
                fix内容区域<br />
                fix内容区域<br />
                fix内容区域<br />
                fix内容区域<br />
                fix内容区域<br />
                fix内容区域<br />
                fix内容区域<br />
                fix内容区域<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>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</span><br>
            <span>ssssssssssssssss</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>

 

转载于:https://www.cnblogs.com/wolfocme110/p/4025758.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一、遇顶固定的例子 我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫“层的智能浮动效果”。目前我们在国内的商业网站上就常常看到这样的效果了。例如淘宝网的搜索结果页的排序水平条,在默认状态,该工具条是跟随页面滚动的,如下图: 而当我们下拉滚动条,随着页面向下滚动,当此工具条接触到浏览器的上边缘,这就会独立出来固定在顶部,不跟随页面滚动滚动了,如下图: 类似的例子效果我们在别的网站上都有看到过,例如腾讯微博首页上,当我们下拉屏幕浏览最新微博,工具条也会出现这个效果,如下图: 这个效果看上去方便,贴心,也许还带推动广告的促销呢。原理其实很简单,本文展示两种方法。 二、智能浮动效果的实现原理 它分两种状态,一是默认状态,二是浮动固顶状态。 默认状态就是默认状态,什么也不用做,保持原有的CSS就好。无论有没有对它做定位,做了absolute也好,没做也好,都行。 关键是当浏览器屏幕滚动,该对象div层要移除浏览器界面视区的候,是要修改它的position属性,让它浮动在窗口的上沿显示就行了。最好的position属性是fixed,可以在IE6+和其他浏览器浮动层平滑的固定定位,由于IE6老大哥不支持fixed属性,所以可以另外赋予它absolute属性。当然也会产生副作用——滚动不平滑。不过也无所谓了,在微软公布不再修补更新XP漏洞,在中国360安全卫士的帮助下虽然大家仍然使用XP,但IE的用户已经是少之又少了。 那接下来,如何判断当前div层与浏览器窗口的上边缘接触了呢?遇到浏览器顶部了呢? 当浮动层div与浏览器窗口上边缘接触的一瞬间,其页面垂直偏移值与页面滚动高度是一致的,所以我们就用这个进行判断。那如何获得页面上元素距离页面的垂直距离呢? 这里则是使用javaScript库实现。
Html固定顶部定位滚动导航是指在网页的顶部创建一个导航栏,并使其在滚动页面保持固定在顶部位置。这样用户在浏览页面无论滚动到哪里,导航栏始终可见,方便用户进行网站导航和跳转。 实现固定顶部定位滚动导航的方法有多种,其中一种常用的方法是使用CSS中的position属性与JavaScript来实现。 首先,在HTML中创建一个包含导航栏的div,并给其设定id属性,使其可以在CSS中进行样式设置。例如: ``` <div id="navbar">导航栏内容</div> ``` 接下来,在CSS中添加样式规则,使导航栏显示在网页顶部,并设置其固定定位。例如: ``` #navbar { position: fixed; top: 0; left: 0; width: 100%; background-color: #f1f1f1; } ``` 然后,在JavaScript中添加代码,以实现滚动导航栏的定位。当用户滚动页面,通过监听滚动事件,判断滚动条的垂直位置,如果滚动条的垂直位置超过了导航栏的顶部位置,则给导航栏添加一个类名,通过CSS设定此类名对应的样式,使导航栏固定在顶部。例如: ``` window.onscroll = function() { var navbar = document.getElementById("navbar"); var scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; if (scrollPosition > navbar.offsetTop) { navbar.classList.add("fixed"); } else { navbar.classList.remove("fixed"); } }; ``` 最后,在CSS中给导航栏的固定样式添加一个类名,如".fixed",并设置样式规则。例如: ``` .fixed { position: fixed; top: 0; z-index: 100; //其他样式设置 } ``` 通过以上步骤,即可实现html固定顶部定位滚动导航。当用户滚动页面,导航栏将保持固定在顶部位置,方便用户进行网站导航和跳转。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值