侧边栏下滑即将越过时动态固顶与上滑恢复

对于很多二栏布局的网站而言,正文部分过长时,侧边栏区域下拉过程中出现大片空白,因此我们可以实现当屏幕下滑达到指定元素位置(如即将越过)后对元素固顶来解决侧边栏区域的空旷感

所属分类 WEB

相关标签 JQueryCSS体验

诉求说明

网站为了提升内容曝光率或聚合咨询,经常设计为二栏或者三栏布局。

下图为常见的二栏的网站布局示意图:

/static/upload/post/1646009470433.jpg

除了正文区域外的侧边栏为了更多的聚合网站内容,增加用户兴趣以提升用户黏性。

一般情况下侧边栏的长度是固定的,指定数量的信息列表等等。

如果侧边栏过长,正文过短则会使正文下方出现大面积空白,所以通常侧边栏都相对较短。

而通常正文的长度是不可预知的,或者是无法通过指定长度限制的。

如果正文较短,侧边栏长一点点的话还能够说的过去。

如果正文过长,当用户下拉阅读时就会感觉侧边栏区域非常空旷,体验不友好。

示意效果如下:

/static/upload/post/1646009487200.jpg

/static/upload/post/1646009492718.jpg

因此侧边栏动态固顶变得很有必要。

很多时候网站的侧边栏长度高于屏幕,如果全部固顶必然导致侧边栏靠下的内容无法展示。

因此我们可以选择侧边栏最后一个或多个元素为固顶的元素。

并实现滚动条滑动到元素所在位置进行固顶,返回越过初始位置则恢复原位置。

主要通过监听滚动事件,判断滚动是否达到阈值,对某些元素的CSS样式进行修改。

效果可参考本站的左侧文章目录效果。

我们更多需要了解一个实现思路。

DEMO代码&注释

DEMO地址:http://demo.mebugs.com/fixslider/

一个简单的DEMO,我们选择id="fixed_box"的元素作为滑动固顶元素。

为了明显区分各个元素,米虫使用不同的背景色。

该效果只有屏幕宽度超过1000px才会生效,因为对于手机端或其他移动端而言,侧边栏固顶没有必要。

可以全文COPY本代码至一个空的HTML文件中体验。

实现动态固定的原理主要是计算当前滚动的位置,替换需要固顶元素的position属性来达成动态效果。

实现核心:Jquery的scroll()(也可以通过监听原生的滚动事件)

<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>滑动指定元素位置侧边栏固定及恢复 - 米虫先生</title>
    <meta name="keywords" content="米虫,前端,DEMO">
    <meta name="description" content="滑动指定元素位置侧边栏固定及返回原位置恢复的DEMO">
</head>
<body>
    <style>
    body{
        width:1000px;
        margin:0 auto;
        font-size:24px;
        text-align:center;
        color:#fff;
        line-height:50px;
    }
    .left{
        height:1500px;
        width:700px;
        float:left;
        background:black;
    }
    .right{
        float:left;
    }
    .right_box{
        width:300px;
        height:300px;
    }
    </style>
    <div class="left">
        <br><br><br>正文区域<br><br><br>
        <br><br><br>正文区域<br><br><br>
        <br><br><br>正文区域<br><br><br>
        <br><br><br>正文区域<br><br><br>
        <br><br><br>正文区域<br><br><br>
    </div>
    <div class="right">
        <div class="right_box" style="background:green;">
            <br><br>该区域不浮动<br><br>
        </div>
        <div id="fixed_box" class="right_box" style="background:blue;">                          <br>达到区域需要浮动<br>
            返回恢复位置<br>
            浮动主要针对PC<br>
            手机不需要浮动<br>
        </div>
    </div> 
    <!-- 加载Jquery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>           <script>
        //获取屏幕宽度
        var width = $(window).width();
        if(width>1000) {
            //需要悬浮元素距离顶部的距离
            var oTop = $("#fixed_box").offset().top;
            //当前滑动距离
            var sTop = 0;
            //当滑动时触发
            $(window).scroll(function() {
                //实时滑动距离
                sTop = $(this).scrollTop();
                //越过元素,悬浮
                if(sTop >= oTop) {
                    //此处可以通过指定一个class的方式实现样式浮动
                    //通过CSS3特性还可以实现一些Class叠加后的动态线性变化
                    $("#fixed_box").css({"position":"fixed","top":"0"});                             }else{
                    //高度低于原始值,恢复原始样式
                    $("#fixed_box").css({"position":"static"});
                }
            });
        }
    </script>
</body>
</html>

DEMO地址:http://demo.mebugs.com/fixslider/

米虫

做一个有理想的米虫,伪全栈程序猿,乐观主义者,坚信一切都是最好的安排!

本站由个人原创、收集或整理,如涉及侵权请联系删除

本站内容支持转发,希望贵方携带转载信息和原文链接

本站具有时效性,不提供有效、可用和准确等相关保证

本站不提供免费技术支持,暂不推荐您使用案例商业化

发表观点

提示

昵称

邮箱

QQ

网址

当前还没有观点发布,欢迎您留下足迹!

同类其他

WEB

CSS文字超出隐藏添加省略号及失效处理

在前端页面中文字超出隐藏并添加省略号是比较常见的样式处理,实际CSS样式中单行省略和多行省略的样式有所差异,在某些特殊场景下多行超出的样式会不生效,本文给出相关解决方案

clipboard.js实现一键复制

clipboard.js相比早期基于flash制作的一键复制插件具有更好的兼容性,关键对于手机浏览器支持良好,无需其他依赖,使用简单,并且提供了钩子函数用于自定义的实现

前端JS对字段编码预防XSS攻击

跨站脚本攻击是比较严重的一种攻击行为,恶意脚本注入到相关页面字段中轻易获取敏感信息和向后端发起请求,前端应用应当对请求数据进行编码

Jquery中.attr()和.prop()方法

Jquery中使用attr()方法动态设置多选框被选中状态时不生效或需要操作多次方可生效的问题可通过prop()替代完成,当需要设置html原生属性时最好使用prop()方法来进行操作

Vue3中无需引入Vuex的替代方案

Vue3 中所提供组合 API、ref、reactive、provide、inject几大特性,可以支持完成全局状态管理能力,Vuex 是为 Vue 单独提供的状态管理插件,相对比较笨重,如果项目简单可以尝试替代

Jquery+CSS3实现网页入场动画特效

多数网站首页的数据往往是最庞大的,三到五秒打开都算比较优秀,因此设置一个开场(预加载)动画特效能够大幅度提升用户感官体验,这里分享本站使用的加载动画,整体比较简约清新

选择个人头像

昵称

邮箱

QQ

网址

评论提示

  • 头像:系统为您提供了12个头像自由选择,初次打开随机为你选择一个
  • 邮箱:可选提交邮箱,该信息不会外泄,或将上线管理员回复邮件通知
  • 网址:可选提交网址,评论区该地址将以外链的形式展示在您的昵称上
  • 记忆:浏览器将记忆您已选择或填写过得信息,下次评论无需重复输入
  • 审核:提供一个和谐友善的评论环境,本站所有评论需要经过人工审核