滚动到指定的nav固定在顶部
来源:互联网 发布:ios广告拦截软件 编辑:程序博客网 时间:2024/06/02 02:23
上图是滚动前后的一个对比效果:
主要用到的是滚动条的监听,下面封装一段函数,如下:
// 封装一个兼容性的获取页面的头部或是左侧的函数
function scroll(){
return {
scrollTop:window.pageYOffset || document.body.scrollTop ||document.documentElement.scrollTop|| 0,
scrollLeft:window.pageXOffset || document.body.scrollLeft ||document.documentElement.scrollLeft|| 0
}
}
然后是获取nav以上的两个最外层的div的高度,代码如下:
//监听页面滚动,使商品固定在顶部
window.onscroll = function(){
//获取页面滚动条的滚动距离
var scrollTop = scroll().scrollTop;
//如果页面滚动条的滚动距离大于限时兑换和头部的距离就使nav固定定位,加fixed这个类
.fixed {
position: fixed;
top: 0;
z-index: 20;
width: 100%;
overflow: hidden;
background: #fff;
padding-bottom: .1rem;
}
if( scrollTop > topPart.offsetHeight+topHead.offsetHeight ){
navBar.className = "shop_list-box fixed";
}else{//否则取消
navBar.className = "shop_list-box";
}
};
这个效果就类似于京东,天猫等等的导航效果
- 滚动到指定的nav固定在顶部
- 导航栏滚动到顶部时固定在顶部
- 页面滚动到指定位置导航栏固定顶部
- 当div滚动到顶部时,DIV固定在顶部不动,不随滚动条滚动而滚动,除这个div以外的其它元素可以滚动
- div在浏览器滚动的时候在顶部固定
- 滚动指定UITableViewCell到顶部
- 顶部固定显示;某模块的标题栏在滚动时固定显示;到底部时显示底部banner;回到顶部。4个效果
- 导航栏滚动到顶部后固定
- JQ:当页面滚动到一定位置之后,让元素固定在顶部,小于位置后恢复原来的位置
- 滚动条下拉时 table 的thead 固定在网页固定在顶部不动
- jQuery 顶部导航跟随滚动,固定浮动在顶部
- 固定在顶部的菜单
- 固定在顶部的进度条
- HTML5,指定内容滚动到底部固定
- 如何让处于文档流中间的tab标签页滚动到顶部时固定
- android view滑动到顶部并固定在顶部
- 当元素滚动到顶部后固定位置
- Axure怎么制作页面滚动时菜单固定在顶部的
- 学习linux溢出-1
- Predix发布全新UI视觉系统, 引领工业物联网应用平台新体验
- Android的.so文件、ABI和CPU的关系
- Hdu6050 Funny Function(2017多校第2场)
- 网络请求判断有无网络
- 滚动到指定的nav固定在顶部
- 极角排序以及凸包模板
- centos pip install MySql-python
- Shell命令之用脚本判断源码包是否安装
- oracle 利用 ROW_NUMBER() OVER实现重复数据只取一条并且循环取直到满足所需的条数
- java中HashMap详解
- Qt之界面实现技巧之按钮,边框,主题背景等
- SpringBoot入门(二)
- JDK各个版本的新特性