网站为了提升内容曝光率或聚合咨询,经常设计为二栏或者三栏布局。
下图为常见的二栏的网站布局示意图:
除了正文区域外的侧边栏为了更多的聚合网站内容,增加用户兴趣以提升用户黏性。
一般情况下侧边栏的长度是固定的,指定数量的信息列表等等。
如果侧边栏过长,正文过短则会使正文下方出现大面积空白,所以通常侧边栏都相对较短。
而通常正文的长度是不可预知的,或者是无法通过指定长度限制的。
如果正文较短,侧边栏长一点点的话还能够说的过去。
如果正文过长,当用户下拉阅读时就会感觉侧边栏区域非常空旷,体验不友好。
示意效果如下:
因此侧边栏动态固顶变得很有必要。
很多时候网站的侧边栏长度高于屏幕,如果全部固顶必然导致侧边栏靠下的内容无法展示。
因此我们可以选择侧边栏最后一个或多个元素为固顶的元素。
并实现滚动条滑动到元素所在位置进行固顶,返回越过初始位置则恢复原位置。
主要通过监听滚动事件,判断滚动是否达到阈值,对某些元素的CSS样式进行修改。
效果可参考本站的左侧文章目录效果。
我们更多需要了解一个实现思路。
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>
当前还没有观点发布,欢迎您留下足迹!
在前端页面中文字超出隐藏并添加省略号是比较常见的样式处理,实际CSS样式中单行省略和多行省略的样式有所差异,在某些特殊场景下多行超出的样式会不生效,本文给出相关解决方案
clipboard.js相比早期基于flash制作的一键复制插件具有更好的兼容性,关键对于手机浏览器支持良好,无需其他依赖,使用简单,并且提供了钩子函数用于自定义的实现
跨站脚本攻击是比较严重的一种攻击行为,恶意脚本注入到相关页面字段中轻易获取敏感信息和向后端发起请求,前端应用应当对请求数据进行编码
Jquery中使用attr()方法动态设置多选框被选中状态时不生效或需要操作多次方可生效的问题可通过prop()替代完成,当需要设置html原生属性时最好使用prop()方法来进行操作
Vue3 中所提供组合 API、ref、reactive、provide、inject几大特性,可以支持完成全局状态管理能力,Vuex 是为 Vue 单独提供的状态管理插件,相对比较笨重,如果项目简单可以尝试替代
多数网站首页的数据往往是最庞大的,三到五秒打开都算比较优秀,因此设置一个开场(预加载)动画特效能够大幅度提升用户感官体验,这里分享本站使用的加载动画,整体比较简约清新