Vue实现导航栏吸顶效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Vue实现导航栏吸顶效果</title></head><body><script src="static/js/vue.js"></script><style>body {margin: 0;}/* 背景 */#app {height: 2000px;margin: 0 auto;background-color: #eeeeee;}/* 导航 */.nav {width: 100%;height: 30px;background-color: #666666;}/* 固定导航 */.fix-nav {position: fixed;top: 0;z-index: 999;}</style><div id="app"><div id="nav" class="nav" :class="{'fix-nav': navBarFixed}"></div></div><script>const app = new Vue({el: "#app",data() {return {navBarFixed: false,};},mounted() {// 事件监听滚动条window.addEventListener("scroll", this.watchScroll);},destroyed() {// 移除事件监听window.removeEventListener("scroll", this.watchScroll);},methods: {watchScroll() {// 滚动的距离var scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;// 容器的高度var offsetTop = document.querySelector("#nav").offsetHeight;console.log("scrollTop=>", scrollTop, "  offsetTop=>", offsetTop);//  滚动的距离如果大于了元素到顶部的距离时，实现吸顶效果if (scrollTop > offsetTop) {this.navBarFixed = true;} else {this.navBarFixed = false;}},},});</script></body>
</html>

参考
Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）

Vue实现导航栏吸顶效果相关推荐

监听滚动条事件来实现导航栏吸顶效果
首先要实现监听滚动条的位置: (1)在mounted钩子函数中随便定义一个方法来获取滚动条变化: window.addEventListener('scroll', this.handleScroll ...
Vue导航栏吸顶及滚动渐变色
@阿乐今天敲代码没效果图好几天没更新了,做一个小demo吧.导航栏吸顶,以及随页面滚动实现渐变色吸顶前: 吸顶后: 滚动渐变色: 一.实现 html: <div class="n ...
vue中怎么实现吸顶效果
在 web 应用中,我们经常需要让页面中的一个或多个元素在页面滚动时保持固定位置.这种效果通常被称为吸顶效果,因为它使元素像粘在页面顶部一样固定不动. 在 Vue 中,实现吸顶效果有不同的方法.本文将 ...
导航栏吸顶 vs 滚动定位
需求描述: 实现导航滚动过banner之后吸顶,点击导航后定位到对应模块,滚动到对应模块后导航对应区域实现高亮效果~~~ html+css+js swiper+jq 使用html+swiper实现页面 ...
uniApp 适配问题自定义头部导航栏/吸顶距离适配
//获取微信小程序胶囊位置和参数 V_Proto.$getCap = function(){//#ifdef MP-WEIXIN//只有在微信小程序才执行let cap = uni.getMenuBu ...
微信小程序导航头部吸顶效果
功能描述:当页面滚动到该元素的时候,变成固定的导航头部,也就是固定在最上面,当往回滑动时又变成原来的样子. 基本原理是: 1.获取要吸顶元素到页面顶部的高度 2.监听页面已经滚动的高度 3.将要吸顶元 ...
CoordinatorLayout+AppBarLayout顶部栏吸顶效果
看需求/效果如果要实现如下效果,顶部标题栏随着上滑隐藏,且能显示缩略文字标题,那么就要用到CoordinatorLayout+几个layout了. 控件简介 CoordinatorLayout遵循M ...
滚动页面，实现导航栏固定在顶部（吸顶效果）
内容说明页面中有导航栏,当页面滚动超出一定范围时,它会固定在设置好的位置,一般是固定在顶部. 本文有两种方式实现,一种是sticky,兼容不好:另外一种是sticky的解体..兼容效果万能 1.首先 ...
微信小程序导航栏或菜单栏吸顶效果简单实现
微信小程序导航栏或菜单栏吸顶效果简单实现思路: 1.获取导航栏初始位置距顶部的距离s1(通过获取页面标签方法) 2.监听页面的滑动,获取滑动距离s2(使用onPageScroll) 3.当s2> ...

Vue实现导航栏吸顶效果

Vue实现导航栏吸顶效果相关推荐

最新文章

热门文章