vue实现固定位置显示功能

2024-04-01 23:03:46

在vue项目中实现吸顶效果.

比如说，我们要实现的功能是导航栏在页面下滑到一定位置之后，便固定不定。

首先：要在mounted生命周期内监听'scroll'事件，事件触发后，执行一个处理滚动的函数。

window.addEventListener('scroll', this.handleScroll)
  methods:{
handleScroll () {
 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 var offsetTop = document.querySelector('#searchBar').offsetTop
 if (scrollTop > offsetTop) {  //判断是否到达了顶部
  this.searchBarFixed = true
 } else {
  this.searchBarFixed = false
 }
}
 }

完整源代码如下：

<template>
<div>
 <div class="nav"></div>
<div class="searchBar" id="searchBar">
 <ul :class="searchBarFixed == true ? 'isFixed' :''"> //用v-bind绑定样式
  <li>区域<i class="iconfont icon-jiantouxia"></i></li>
  <li>价格<i class="iconfont icon-jiantouxia"></i></li>
  <li>房型<i class="iconfont icon-jiantouxia"></i></li>
  <li>更多<i class="iconfont icon-jiantouxia"></i></li>
 </ul>
</div>
<div class="content">
</div>
</div>
</template>
<script>
 export default {
  components:{
  },
mounted () {
 window.addEventListener('scroll', this.handleScroll)
},
    data(){
     return {
      searchBarFixed:false
    }
 },
  methods:{
handleScroll () {
 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 var offsetTop = document.querySelector('#searchBar').offsetTop
 if (scrollTop > offsetTop) {
  this.searchBarFixed = true
 } else {
  this.searchBarFixed = false
 }
},
 }
 }
</script>
<style lang="less" scope>
.nav{
 height: 250px;
}
.content{
 height: 1900px;
}
.searchBar{
 .isFixed{
  position:fixed;
  background-color:#Fff;
  top:0;
  z-index:999;
 }
 ul {
  width:100%;
  height: 40px;
  line-height: 40px;
  display: flex;
  li {
   list-style: none;
   font-size: 0.8rem;
   text-align: center;
   flex: 1;
   i {
    font-size: 0.9rem;
    padding-left: 5px;
    color: #ccc;
   }
  }
  border-bottom: 1px solid #ddd;
 }
}
</style>

总结

以上所述是小编给大家介绍的vue实现固定位置显示功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

vue实现某元素吸顶或固定位置显示（监听滚动事件）

最近写了一个VUE的web app项目,需要实现某个部位吸顶的效果.即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示. 1.监听滚动事件利用VUE写一个在控制台打印当前的scrollTop, 首先,在mounted钩子中给window添加一个滚动滚动监听事件, mounted () { window.addEventListener('scroll', this.handleScroll) }, 然后在方法中,添加这个handleScroll方法 handleScroll () {
解决Vue页面固定滚动位置的处理办法

最近做项目遇到一个问题,就是Vue滚动不固定,网上找了一些资料,说下 vue 固定滚动位置的处理办法. 问题描述: 通常见于列表页List -> 详情页Detail 的情况, 从列表的某一项x 进入到详情页, 再返回的时候, 希望列表的位置固定在x, 而不是回到顶部了. vue-router 里面是有一个 scrollBehavior 的, 但是这个玩意只能在 history 模式下面使用, 而我用的 hash 模式. 所以我们要自己实现嘛, 思路简单:List 里面监听滚动, 记录滚动位置
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置

前提: 之前写过关于keep-Alive组件,来实现在列表页进入详情页后,后退,返回列表,显示上次访问的位置(原理就是缓存列表页数据来实现),目前发现另外一个问题,就是如果后台操作改变数据的状态,缓存的办法就会导致数据更新不及时导致一些页面错误(例如:商品疑问,在后台答复之后,不可以修改内容,前台更新不及时就会导致,前台显示可编辑,但实际状态是不可编辑了),所以又继续研究另外一种解决办法,scrollBehavior 来实现. 简介: 使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持
vue实现固定位置显示功能

在vue项目中实现吸顶效果. 比如说,我们要实现的功能是导航栏在页面下滑到一定位置之后,便固定不定. 首先:要在mounted生命周期内监听'scroll'事件,事件触发后,执行一个处理滚动的函数. window.addEventListener('scroll', this.handleScroll) methods:{ handleScroll () { var scrollTop = window.pageYOffset || document.documentElement.scroll
vue滚动固定顶部及修改样式的实例代码

滚动固定位置有多种方法 1 css3 粘性定位 position:sticky: top:20px: 2直接position:fixed:给顶部盒子设置一个margin-top刚好是需要固定的盒子的高度 3事件监听更改style中的position属性 ** 修改样式滚动监听事件中使用this.$refs.xxx.style.color='xxxx' 这种方式会报错 Uncaught TypeError: Cannot read property 'style' of undefined 所
Vue实现固定定位图标滑动隐藏效果

写在前面移动端页面,有时候会出现一些固定定位在底部图标,比如购物车等.这时候如果添加一个滑动页面,图标透明度变低,同时移动到屏幕边进行隐藏,效果如下. 所用原理监听滑动事件,每次进行滑动时,触发动画,添加定时器,1.4s后显示该图标.具体代码如下: <template> <section class="fixed-icon" :style="{ bottom: bottom + 'rem' }" :class="[ !transit
JS实现随页面滚动显示/隐藏窗口固定位置元素

窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素:当页面位置小于某高度,或者页面向上滚动时,隐藏该元素. 先给大家展示下效果图: 1.html <p id="selected-case-count"><span class='form-control'>已选: <span class="casecount">0</span></span></p> 2.css p#sel
JQUERY实现网页右下角固定位置展开关闭特效的方法

本文实例讲述了JQUERY实现网页右下角固定位置展开关闭特效的方法.分享给大家供大家参考.具体如下: html代码: <div class="tagbox"> <div class="tag"> <span>热门标签...</span> <ul> <li><a href='/tag/js展开收起_1.html' target="_blank">js展开收起<
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法

本文实例讲述了js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法.分享给大家供大家参考.具体如下: //控制logo的显示位置 Begin window.addEventListener("resize", function () { // 得到屏幕尺寸 (内部/外部宽度,内部/外部高度) changeLogoPosition(); }, false); changeLogoPosition(); function changeLogoPosition() { var conten
javascript实现的固定位置悬浮窗口实例

本文实例讲述了javascript实现的固定位置悬浮窗口.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g
JS简单实现DIV相对于浏览器固定位置不变的方法

本文实例讲述了JS简单实现DIV相对于浏览器固定位置不变的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <title>Anchor Properties</title> <meta http-equiv="Content-Type" content=&q
css层固定位置练习

层固定位置练习--by 阿会楠 html,body{ overflow:hidden; padding:0; margin:0; width:100%; height:100%; } #_body{ height:100%; overflow-y:scroll; width:100%; height:100%; } #adDiv{ position:absolute; z-index:99999; bottom:10px; left:10px; width:200px; height:30px;
Vue 固定头固定列点击表头可排序的表格组件

原理是将原table的指定行,指定列clone一份放在其上实现代码如下: <template> <div> <div id="divBox1" :style="{height:height}"> <table id="tbTest1" cellpadding="0" cellspacing="0" style="text-align:center;bac

vue实现固定位置显示功能

相关推荐

随机推荐