h5滚动页面固定导航
1、需要效果
2、实现方法
(1)原生js实现
document.addEventListener('scroll', function (event) {
var scrollDamo = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if (scrollDamo >= 350) { // 触发的位置
document.getElementsByClassName('cont-info-kc')[0].style.cssText = 'position:fixed;';
} else {
document.getElementsByClassName('cont-info-kc')[0].style.cssText = 'position:static;';
}
});
html
<div class="cont-info-kc"></div>
(2) vue实现
<div style="height:16px;background:#F4F4F4" id='testNavBar'></div>
<div id="cont-info-kc" :class='{ fixedNavbar: isfixTab }'>
<ul>
<li :class="period==-1 ? 'secactive': ''" @click.stop="getsetion(-1)">全部</li>
<li :class="period==155 ? 'secactive': ''" @click.stop="getsetion(155)">好的</li>
<li :class="period==156 ? 'secactive': ''" @click.stop="getsetion(156)">晴天</li>
<li :class="period==157 ? 'secactive': ''" @click.stop="getsetion(157)">需要</li>
</ul>
<a @click.stop="moreClick" style="line-height:50px;" v-show="!tongyongIsshow">更多</a>
</div>
data () {
return {
isfixTab: false
}
}, methods: { // 先分别获得id为testNavBar的元素距离顶部的距离和页面滚动的距离
// 比较他们的大小来确定是否添加fixedNavbar样式
handleTab() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
var offsetTop = document.querySelector('#testNavBar').offsetTop
scrollTop > offsetTop ? this.isfixTab = true : this.isfixTab = false
} }, // 监听页面滚动
mounted () {
window.addEventListener('scroll', this.handleTab, true)
}, //离开时清除滚动监听
beforeRouteLeave (to, from, next) {
window.removeEventListener('scroll', this.handleTab, true)
next()
}
.fixedNavbar{
position: fixed;
top: 2.25rem;
left:;
width: 100%;
border-top: 0.05rem solid #f5f5f5;
border-bottom: 0.05rem solid #f5f5f5;
background: #f5f5f5;
}
h5滚动页面固定导航的更多相关文章
- 使用 jQuery.Pin 垂直滚动时固定导航
ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...
- vue使用原生js实现滚动页面跟踪导航高亮
需要使用vue做一个专题页面. 滚动页面指定区域导航高亮. BetterScroll:可能是目前最好用的移动端滚动插件 如何自定义CSS滚动条的样式? 监听滚动页面事件,对比当前页面的位置与元素的位置 ...
- jQuery 顶部导航尾随滚动,固定浮动在顶部
jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...
- 滚动页面时DIV到达顶部时固定在顶部
本示例使用Javascript实现了滚动页面时,DIV到达顶部时固定在顶部.在IE下效果有点闪,效果网址:http://www.keleyi.com/keleyi/phtml/fixdiv.htm 下 ...
- vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改
vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...
- fullpage.js 结合固定导航栏—实现定位导航栏
开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...
- bootstrap的 附加导航Affix导航 (侧边窄条式 滚动监控式导航) 附加导航使用3.
affix: 意思是粘附, 附着, 沾上. 因此, 附加导航就是 bootstrap的 Affix.js组件. bootstrap的 附加导航, 不是说导航分成主导航, 或者什么 副导航的 而是指, ...
- 帮助快速生成页面固定显示元素的jQuery插件 - sticky-kit
来源:GBin1.com 如果需要在用户滚动页面的时候,保持特定元素始终可见的话,今天这里我们介绍的Sticky-Kit是一个不错的选择. 它是一个开源的jQuery插件,可以帮助大家快速针对页面元素 ...
- JS---封装getScroll函数 & 案例:固定导航栏
封装getScroll函数 1. 获取页面向上或者向左卷曲出去的距离的值 2. 浏览器的滚动事件 function getScroll() { return { left: window.pageXO ...
随机推荐
- Android基础控件DatePicker的使用
1.简介 DatePicker日期选择器,自带spinner和calendar两种模式,相关属性: android:calendarTextColor : 日历列表的文本的颜色 android:cal ...
- socket工作原理深入分析
socket原理分析 本篇文章摘自https://www.cnblogs.com/zengzy/p/5107516.html,总结的很好,所以摘过来总结整理一下,如果朋友们还想更加深入的研究网络,推荐 ...
- tar指令集合
把常用的tar解压命令总结下,当作备忘: tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个, ...
- Markdown 格式标记符号说明
Markdown 格式标记符号说明 1. 标题 在行首插入 1 到 6个#,分别表示标题 1 到标题 6 # 这是标题1 ## 这是标题1 ###### 这是标题6 点击保存后的效果: 标题1 标题2 ...
- 2019-2-13-Latex-论文elsevier,手把手如何用Latex写论文
title author date CreateTime categories Latex 论文elsevier,手把手如何用Latex写论文 lindexi 2019-02-13 10:38:20 ...
- Exit- Linux必学的60个命令
1.作用 exit命令的作用是退出系统,它的使用权限是所有用户. 2.格式 exit 3.参数 exit命令没有参数,运行后退出系统进入登录界面.
- 获取计算机以及本机信息API
获取计算机名: BOOL GetComputerName( LPTSTR lpBuffer, // computer name LPDWORD lpnSize // size of name buff ...
- locate,find,df,mount,du命令
1.locate找数据的时候,相当于去这个数据库里面查(locate查找的时候不扫描磁盘)查找图标文件:locate .icolocat -i 不区分大小写创建一个文件,该文件没有在数据库中,要想在数 ...
- Django项目:CRM(客户关系管理系统)--77--67PerfectCRM实现CRM课程出勤排名
# classtop_urls.py # ————————64PerfectCRM实现CRM课程排名详情———————— from django.conf.urls import url from b ...
- extern “C”的用法
引言 由于不同的代码互相调用起来很容易出错,甚至同一种代码但由不同的编译器编译,为实现C++代码调用其他C语言代码,会在C语言代码的部分加上extern "C",表明这段代码需要按 ...