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滚动页面固定导航的更多相关文章

  1. 使用 jQuery.Pin 垂直滚动时固定导航

    ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...

  2. vue使用原生js实现滚动页面跟踪导航高亮

    需要使用vue做一个专题页面. 滚动页面指定区域导航高亮. BetterScroll:可能是目前最好用的移动端滚动插件 如何自定义CSS滚动条的样式? 监听滚动页面事件,对比当前页面的位置与元素的位置 ...

  3. jQuery 顶部导航尾随滚动,固定浮动在顶部

    jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...

  4. 滚动页面时DIV到达顶部时固定在顶部

    本示例使用Javascript实现了滚动页面时,DIV到达顶部时固定在顶部.在IE下效果有点闪,效果网址:http://www.keleyi.com/keleyi/phtml/fixdiv.htm 下 ...

  5. vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改

    vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...

  6. fullpage.js 结合固定导航栏—实现定位导航栏

    开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...

  7. bootstrap的 附加导航Affix导航 (侧边窄条式 滚动监控式导航) 附加导航使用3.

    affix: 意思是粘附, 附着, 沾上. 因此, 附加导航就是 bootstrap的 Affix.js组件. bootstrap的 附加导航, 不是说导航分成主导航, 或者什么 副导航的 而是指, ...

  8. 帮助快速生成页面固定显示元素的jQuery插件 - sticky-kit

    来源:GBin1.com 如果需要在用户滚动页面的时候,保持特定元素始终可见的话,今天这里我们介绍的Sticky-Kit是一个不错的选择. 它是一个开源的jQuery插件,可以帮助大家快速针对页面元素 ...

  9. JS---封装getScroll函数 & 案例:固定导航栏

    封装getScroll函数 1. 获取页面向上或者向左卷曲出去的距离的值 2. 浏览器的滚动事件 function getScroll() { return { left: window.pageXO ...

随机推荐

  1. 01.visual studio 2017添加菜单

    创建项目 文件--新建项目 如果新建项目 左侧没有扩展菜单,请安装即可 添加菜单 右键--添加新项 菜单设置 菜单设置文件: MyCommandPackage.vsct <Buttons> ...

  2. SPSS分析过程可自动化,你知道吗

    SPSS分析过程可自动化,你知道吗 在使用SPSS的过程中,有时候会遇到重复进行相同分析操作的情况,或者分析过程很复杂的情况. 这时候我们多么希望SPSS能够记住上一次的分析步骤,不要让我们重复的去点 ...

  3. HTML 排版标记

    <p></p> : 表示一个段落 常用属性 : align : 水平对齐方式  取值 :left  center right 和Word文档一样 : 段落有空行  <br ...

  4. history配置

    /etc/profile配置文件中,末尾增加如下参数项: HFILE=`who -m | awk '{print $1}'`readonly HISTFILE=/var/history/$HFILE- ...

  5. Sqoop学习笔记_Sqoop的基本使用二(sqoop的import与export)

    Sqoop抽取从mysql抽取到hive sqoop抽取到mysql一样有两种方式一种是用command line的方式,一种是用sqoop opt文件调用的方式.(由于两种sqoop一已经记录了,现 ...

  6. vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

  7. [SHOI2007] 书柜的尺寸 思维题+Dp+空间优化

    Online Judge:Luogu-P2160 Label:思维题,Dp,空间优化 题面: 题目描述 给\(N\)本书,每本书有高度\(Hi\),厚度\(Ti\).要摆在一个三层的书架上. 书架的宽 ...

  8. 修改linux命令行的提示符PS1

    # If not running interactively, don't do anything [ -z "$PS1" ] && return # check ...

  9. RN 环境搭建 运行demo App

    1.环境搭建 1.1 JDK 1.2Android JDK  需要安装c++环境(我选择安装android studio) 1.3Node npm config set registry https: ...

  10. 基于阿里云安装脚本扩展 之 自动安装mongodb及php扩展

    好久没有发布文章了,有点跟不上当初这个博客的初衷.为了使自己的博客更新不半途而废,今天特意再写了一个自动安装脚本,一样是基于阿里云的服务端安装脚本进行的扩展.闲话不说,直接放代码: #!/bin/ba ...