导航栏滚动的时候置顶html,vue移动端 导航吸顶（固定定位）页面滚动出现抖动...

最新推荐文章于 2021-10-20 22:55:01 发布
最新推荐文章于 2021-10-20 22:55:01 发布
阅读量724 收藏 1
点赞数
文章标签： 导航栏滚动的时候置顶html

1-在页面中监听了滚动条，滚动到310px就固定定位了，添加类名的方式

handleScroll () {

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

if (scrollTop > 310) {

this.searchBarFixed = true;

} else {

this.searchBarFixed = false;

}

2-但是在页面滚动的时候 导航条就会一直抖动

下面是html样式

主页

简介

成员

赛事

css的样式：

.searchBar {

.isFixed {

position: fixed;

background-color: #fff;

top: 0;

z-index: 999;

width: 100%;

background-color: #fff;

}

}

19775e2758fe00680cd3906c157913d4.png

跪求大神解答

weixin_28812205
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue@scroll 滚动某位置加载内容的做法
weixin_41033048的博客
09-18 286
<div class="emailList" id="emailList" v-if="emailShow" @scroll="scrollGet($event)"></div> scrollGet(e) { // 滚动条高度 e.srcElement.scrollTop, e.target.scrollTop // 窗口可视区域高度 e.target.offsetHeight // 滚动高度 e.target.scrollHeight if (e.target.
vue实现导航标题栏随页面滚动渐隐渐显效果
10-15
主要介绍了vue实现导航标题栏随页面滚动渐隐渐显效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue实现吸顶、锚点和滚动高亮按钮效果
weixin_52031970的博客
07-06 2476
需求 滚动页面到顶部，实现某元素固定到顶部效果 点击某个按钮，页面滚动到相应的位置 滚动页面，当到达某个位置时，高亮对应的相关按钮 元素吸顶实现方式 关于元素吸顶效果，通过查阅相关资料和相关测试，有三种方式（还有一种是jquery的方法，这里就不介绍了） 一、使用position:sticky 1. 什么是position:sticky? 粘性定位元素相当于position:relative和position:sticky的结合体，受限于父级元素，在不同的条件下呈现出不同的页面效果 2. 如
VUE 实现滚动监听 导航栏置顶的方法
10-18
今天小编就为大家分享一篇VUE 实现滚动监听 导航栏置顶的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 固定div 滚动_vue移动端 导航吸顶（固定定位）页面滚动出现抖动
weixin_39653442的博客
02-05 643
1-在页面中监听了滚动条，滚动到310px就固定定位了，添加类名的方式handleScroll () {var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTopif (scrollTop > 310) {this.searchBarFixed = tr...
vue的滚动scroll事件 实现某元素吸顶或者固定位置显示
热门推荐
boy火巨的博客
07-09 6万+
vue监听滚动事件 实现某元素吸顶或者固定位置显示2017年09月16日 15:33:33阅读数：26910最近写了一个VUE的web app项目，需要实现某个部位吸顶的效果。即，页面往上滑动，刚好到达该部位时，该部分，固定在顶部显示。1、监听滚动事件利用VUE写一个在控制台打印当前的scrollTop,首先，在mounted钩子中给window添加一个滚动滚动监听事件，mounted () { ...
详解vue.js移动端导航navigationbar的封装
10-19
总的来说，封装Vue.js移动端导航栏组件是一种良好的实践，它使得我们的代码更加模块化，易于维护和扩展。通过调整组件的props和使用插槽，我们可以快速适应各种界面设计需求，从而提升用户体验。
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
10-14
Vue.js 是一个流行的前端框架，用于构建用户界面。在 Vue 中实现导航锚点和平滑滚动是一种常见的需求，尤其是在创建响应式网页布局时。平滑滚动可以让用户体验更流畅，而导航栏对应变化则有助于用户理解他们在网站中...
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
10-18
在Vue.js应用中，开发底部导航栏经常遇到的问题是，一级路由可以正常显示，但其对应的子路由却无法正确呈现。这种情况通常是由于路由配置、组件嵌套或UI库的使用不当所引起的。以下是一个详细的解决方案，针对的是...
vue开发移动端底部导航条功能
10-15
主要介绍了vue开发移动端底部导航条功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
throttleScroll:节流和去抖动 javascript 滚动事件
07-08
油门滚动 替换 javascript 滚动事件侦听器，防止滚动回调函数堆叠并导致性能下降。 具有滚动去抖动的选项，或在最后一次滚动事件后的指定时间触发回调函数。 灵感 默认油门使用 如果当前正在运行，则限制滚动事件并防止触发回调。 老的： window . addEventListener ( 'scroll' , customFunc , false ) ; 新的： throttle . scroll ( customFunc ) ; 去抖动使用 去抖动滚动事件，并且只在最后一次滚动事件后 250 毫秒触发回调。 throttle . scroll ( customFunc , 250 ) ; throttle对象还包含文档垂直滚动的像素数的属性。 function customFunc ( ) { if ( throttle . scrollY > 400 )
滚动页面，实现导航栏固定在顶部（吸顶效果）
Kris的博客
01-02 4万+
首先最简单的，是利用position的sticky属性 说明 sticky 结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位。 它主要用在对scroll事件的监听上；在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：0)；position:sticky这时的效果相当于fixed定位，固定在(top: 0...
html无缝滚动原理,Html5移动端获奖无缝滚动动画实现
weixin_35997246的博客
05-31 428
这篇文章主要介绍了Html5移动端获奖无缝滚动动画实现示例，内容挺不错的，现在分享给大家，也给大家做个参考。本文介绍了Html5移动端获奖无缝滚动动画实现示例，分享给大家，具体如下：需求分析哈哈，上动态图真的是一下就明了了。就是滚动么滚动，那么制作这个有什么方法呢？我们来总结一下:html骨架其实很简单，最外面的是做固定的窗口，里面的控制运动，里面是展示动画第一个结构第二个结构第三个结构第四个结构...
vant框架底部导航栏固定滑动抖动解决
qq_45193707的博客
11-15 6302
#ffoot{ height:120px; position:fixed; bottom:0px; transform: translateZ(0); -webkit-transform: translateZ(0); } transform: translateZ(0); -webkit-transform: translateZ(0);加上这两个属性
Vue实现导航栏吸顶效果
彭世瑜的博客
06-16 6220
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue实现导航栏吸顶效果</title> </head> <body> <script src="static/js/vue.js"></script> <style> body
css滚动条出现，窗口页面抖动问题
weixin_47239395的博客
04-21 1473
html { overflow-y: scroll; } root { overflow-y: auto; overflow-x: hidden; } root { body { position: absolute; } }
vue固定导航栏不随页面滑动
qq_50879110的博客
10-20 5920
<template> <div class="right"> <div class="U_head"> <div class="search"> <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input2" > </el-i
Fullstack Vue 3 The Complete Guide to Vue.js
最新发布
02-23
"这是一本全面介绍Vue.js的前端开发指南——《Fullstack Vue 3：Vue.js及其周边技术完全指南》。本书由Hassan Djirdeh、Nate Murray和Ari Lerner共同撰写，针对Vue.js的最新3.x版本进行了详细讲解。" 在全栈Vue开发...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值