滚动导航栏吸顶固定

<template><div><section id="screen1" class="section1"><p>下滑试试？</p><nav ref="nav"><ul><li><a href="#">我</a></li><li><a href="#">是</a></li><li><a href="#">导</a></li><li><a href="#">航</a></li><li><a href="#">栏</a></li></ul></nav></section><section id="screen2"></section><section id="screen3"></section></div>
</template><script type="text/babel">export default {mounted() {window.addEventListener('scroll', () => {let excNavHeight = (window.innerHeight || document.documentElement.clientHeight)*0.3console.log('excNavHeight', excNavHeight, 'document.body.scrollTop', document.body.scrollTop)if (document.body.scrollTop > excNavHeight) {this.$refs.nav.className = 'fixed'}else {this.$refs.nav.className = ''}})}}
</script><style lang="stylus" rel="stylesheet/stylus" scoped>* {margin: 0; padding: 0;}a {text-decoration: none;}.fixed {position: fixed;top: 0;height: 70px;z-index: 1;}body {color: #fff;font-family: 'open-sans-bold', AvenirNext-Medium, sans-serif;font-size: 18px;text-align: center;}nav {position: absolute;top: 30%;width: 100%;height: 70px;background: #fff;}nav li {display: inline-block;padding: 24px 10px;}nav li a {color: #999;}section {height: 100vh;}#screen1 {background: #43b29d;}#screen1 p {padding-top: 100px;}#screen2 {background: #efc94d;}#screen3 {background: #e1793d;}@media only screen and (max-width: 520px) {nav li {padding: 24px 4px;}nav li a {font-size: 14px;}}
</style>

滚动导航栏吸顶固定相关推荐

Vue导航栏吸顶及滚动渐变色
@阿乐今天敲代码没效果图好几天没更新了,做一个小demo吧.导航栏吸顶,以及随页面滚动实现渐变色吸顶前: 吸顶后: 滚动渐变色: 一.实现 html: <div class="n ...
Vue实现导航栏吸顶效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
导航栏吸顶 vs 滚动定位
需求描述: 实现导航滚动过banner之后吸顶,点击导航后定位到对应模块,滚动到对应模块后导航对应区域实现高亮效果~~~ html+css+js swiper+jq 使用html+swiper实现页面 ...
uniApp 适配问题自定义头部导航栏/吸顶距离适配
//获取微信小程序胶囊位置和参数 V_Proto.$getCap = function(){//#ifdef MP-WEIXIN//只有在微信小程序才执行let cap = uni.getMenuBu ...
监听滚动条事件来实现导航栏吸顶效果
首先要实现监听滚动条的位置: (1)在mounted钩子函数中随便定义一个方法来获取滚动条变化: window.addEventListener('scroll', this.handleScroll ...
微信小程序导航头部吸顶效果
功能描述:当页面滚动到该元素的时候,变成固定的导航头部,也就是固定在最上面,当往回滑动时又变成原来的样子. 基本原理是: 1.获取要吸顶元素到页面顶部的高度 2.监听页面已经滚动的高度 3.将要吸顶元 ...
使用 better-scroll 实现纵向横向双向滚动并设置吸顶
使用 better-scroll 实现纵向横向双向滚动需要达到的效果:右侧内容左右滚动时,左侧边栏不动,上下滑动时整体内容上下滚动如图: 1.纵向滚动安装并引入 import BScroll f ...
随着滚动条下拉，导航栏置顶
随着滚动条下拉,导航栏置顶想做一个这样的效果,当我们下拉滚动条时,写的导航栏置顶. 这是效果图先学习用到的基本知识 jQuery CSS 操作 - scrollTop() 方法 scrollTop ...
小程序 WXS响应事件（滚动菜单栏tab吸顶）
小程序 WXS响应事件(滚动菜单栏tab吸顶) 解决问题: 小程序页面滚动,tab触顶吸顶解决办法: 1)页面滚动事件中监听处理(不推荐) 缺点:在安卓端性能非常差,吸顶效果反应迟钝,不流畅等问题. ...
2022-06-20 工作记录--CSS-sticky实现导航栏、侧边栏固定，右侧展示内容顺畅滑动效果
CSS-sticky实现导航栏.侧边栏固定,右侧内容顺畅滑动效果不积跬步无以至千里~ 细节决定成败,加油

滚动导航栏吸顶固定

滚动导航栏吸顶固定相关推荐

最新文章

热门文章

滚动 导航栏 吸顶 固定

滚动 导航栏 吸顶 固定相关推荐

最新文章

热门文章

滚动导航栏吸顶固定

滚动导航栏吸顶固定相关推荐