vue 监听滚动事件之菜单滚动吸顶点击滑动到指定位置点击高亮

###菜单滚动吸顶效果：

###html:

        <section class="switchModule" id="switchModule"><div class="switchNavbar" id="switchNavbarId"  :class="searchBarFixed == true ? 'isFixed' :''"><div class="navbar__item activity" @click="activity()"><div  :class="{switchAcitve:active=='activity'}">活动介绍</div></div><div class="navbar__item lastest" @click="lastest()"><div  :class="{ switchAcitve:active=='lastest'}">最新配音</div></div><div class="navbar__item rank" @click="rank()"><div  :class="{ switchAcitve:active=='rank'}">排行榜</div></div></div></section>

js:
###data中声明数据

   data: function () {return {active: 'activity',scroll: '',select: -1,activeClass: {background: '#eee'},searchBarFixed:false,};},

###mounted中给window添加一个滚动滚动监听事件

 mounted() {this.$nextTick(function () {//滚动监听事件window.addEventListener('scroll', this.menu)});},

###点击切换高亮效果

    methods: {//操作顶部tabactivity() {this.active = 'activity'var a_h = $("#activityIntro").offset().top;$('html,body').animate({ scrollTop: a_h }, 800);},lastest() {this.active = 'lastest'var l_h = $("#lastestDubbing").offset().top;$('html,body').animate({ scrollTop: l_h }, 800);},rank() {this.active = 'rank'var r_h = $("#rankLlistDetail").offset().top;$('html,body').animate({ scrollTop: r_h }, 800);},}
//监听滚动的事件menu() {var _self = this;_self.scroll = document.documentElement.scrollTop || document.body.scrollTop;var menuTop = document.querySelector('#switchModule').offsetTop//console.log(_self.scroll)console.log(menuTop)//滑动到指定位置菜单吸顶if (_self.scroll > menuTop) {this.searchBarFixed = true} else {this.searchBarFixed = false}//滑动到指定位置相应菜单高亮var a_h = $("#activityIntro").offset().top;var l_h = $("#lastestDubbing").offset().top;var r_h = $("#rankLlistDetail").offset().top;if (_self.scroll < l_h) {this.active = 'activity'} else if (_self.scroll < r_h) {this.active = 'lastest'} else if (_self.scroll > r_h) {this.active = 'rank'}},

###如果离开该页面需要移除这个监听的事件

        destroyed() {window.removeEventListener('scroll', this.menu)},

###css

.isFixed {position: fixed;top: 0;z-index: 999;}
.switchNavbar {display: flex;position: relative;width: 100%;background: #fff;font-size: 0.307rem;color: #333333;letter-spacing: 0;text-align: justify;
}

完整代码如下：

<template><div class="dubbing_activity"><!--@*头部logo*@--><header><div class="headerImg"><img :src="activityInfo.cover_image_url" alt="Alternate Text" /></div><div class="headerText"><div class="headerTextL"><p>{{activityInfo.name}}</p><div>{{activityInfo.name}}，等你来挑战</div></div></div></header><!--跳转活动页--><section class="btntwobox" v-if="showTwoTab"><ul><li class="btnbg" @click="guanActivity()"><img src="/Images/common/dubbing_more_icon.png">更多活动</li><li class="btnbg liright" @click="selfActivity()"><img src="/Images/common/dubbing_found_icon.png">自建活动</li></ul></section><div class="empty"></div><!--@*navbar*@--><section class="switchModule" id="switchModule"><div class="switchNavbar" id="switchNavbarId" :class="searchBarFixed == true ? 'isFixed' :''"><div class="navbar__item activity" @click="activity()"><div :class="{'switchAcitve':active=='activity'}">活动介绍</div></div><div class="navbar__item lastest" @click="lastest()"><div :class="{'switchAcitve':active=='lastest'}">最新配音</div></div><div class="navbar__item rank" @click="rank()"><div :class="{'switchAcitve':active=='rank'}">排行榜</div></div></div></section><!--@*part one*@--><section class="regular_box" id="activityIntro"><!--@*活动报名*@--><div class="sub_box  rule_bg" v-if="activityInfo.is_ended"><div class="min_title">比赛结果</div><span v-if="activityInfo.meta_obj.results" v-html="ReplaceNewLine(activityInfo.meta_obj.results)"></span><span v-if="!activityInfo.meta_obj.results">评审正在评选中，请耐心等待。</span></div><!--@*赛事简介*@--><p class="sub_title topMar">赛事简介</p><div class="sub_box  compit_bg"><span v-html="ReplaceNewLine(activityInfo.meta_obj.introduction)"></span><br /></div><!--@*参赛规则*@--><p class="sub_title">参赛规则</p><div class="sub_box  rule_bg"><span v-html="ReplaceNewLine(activityInfo.meta_obj.rules)"></span></div><!--@*奖励设置*@--><p class="sub_title">奖励设置</p><div class="sub_box  reward_bg"><span v-html="ReplaceNewLine(activityInfo.meta_obj.awards)"></span></div></section><!--@*part two*@--><!--@*最新配音*@--><section class="newlast_dubbing" id="lastestDubbing"><div class="newlestTitle"><span class="new_ttile">最新配音</span><router-link tag="span" :to="{path:'/dubbing-list'}" class="more">更多</router-link></div><ul class="dubbing_ul" id="dubbing_ul"><li v-for="(item,index) in dubbingList" v-if="index < 4" v-bind:style="[select==index ? activeClass : '']" @touchstart="touchstart(index)" @touchend="touchend(index)" @click="linkDubbingList(item)"><!--@*左  *@--><div class="li_l_img"><img :src="item.image_url_origin" alt="Alternate Text" /></div><!--@*中 *@--><div class="li_m_title"><div class="top_title">{{item.title}}</div><div class="min_name">{{item.author_info.nick_name}}的作品</div><div class="bot_date"><span>{{item.create_time.split('T')[0]}}</span><span class="play_detail" v-show="item.download_count"><img class="playcount" src="/Images/common/activity_play_icons.png" alt="">{{item.download_count}}次</span><span class="play_detail" v-show="!item.download_count"><img class="playcount" src="/Images/common/activity_play_icons.png" alt="">0次</span></div></div><!--@*右  *@--><div class="li_r_zan"><span class="zan_count">{{item.like_count}}</span><img class="userZan" src="https://static.eudic.net/web/other/dubbing_like_icon@2x.png" alt=""></div></li></ul></section><!--@*排行榜*@--><section class="leaderboard" id="rankLlistDetail"><div class="leaderboardTitle"><span class="new_ttile">排行榜</span><span class="more" @click="toggleRank()">排序</span></div><!--排序方式--><ul class="rank_style rank_style_top" v-if="showRank&& rankList.length>=3"><li v-for="(item,index) in sortByStyle" v-bind:style="[sortSelect==index?activeClass:'']" @touchstart="touchSortStart(index)" @touchend="touchSortEnd(index)" @click="sortLikeCount(index)"><span class="imgbox"><img v-show="rankType-1==index" class="selImg" src="/Images/common/dubbing_tick_img@2x.png" /></span><span class="selText">{{item.title}}</span></li></ul><ul class="rank_style rank_style_down" v-if="showRank && rankList.length<3"><li v-for="(item,index) in sortByStyle" v-bind:style="[sortSelect==index?activeClass:'']" @touchstart="touchSortStart(index)" @touchend="touchSortEnd(index)" @click="sortLikeCount(index)"><span class="imgbox"><img v-show="rankType-1==index" class="selImg" src="/Images/common/dubbing_tick_img@2x.png" /></span><span class="selText">{{item.title}}</span></li></ul><!--排行榜列表--><ul class="board_ul"><li v-for="(item,index) in rankList" v-bind:style="[selectlink==index ? activeClass : '']" @touchstart="touchstartlink(index)" @touchend="touchendlink(index)" @click="linkRankDubbing(item)"><!--@* left *@--><div class="num">{{item.rank}}</div><!--@* right*@--><div class="person_box"><div class="per_img"><img :src="item.userInfo.avatarUrl" alt="Alternate Text" /></div><div class="li_m_title"><div class="top_title">{{item.userInfo.userName}}</div><div class="bot_date"><span>{{item.last_update_time.split('T')[0]}}</span><span class="play_detail" v-show="item.download_count"><img class="playcount" src="/Images/common/activity_play_icons.png" alt="">{{item.download_count}}次</span></div></div><div class="li_r_zan"><span class="zan_count change_count">{{item.like_count}}</span><img class="userZan" src="https://static.eudic.net/web/other/dubbing_like_icon@2x.png" alt=""></div></div></li></ul></section><!--@*活动报名中*@--><section class="signUpBox" v-show="activityInfo.is_ended==false" @click="shareSignUp"><div v-show="!!tip||!haveSign"><van-button type="primary" class="buttonVan">{{button_text}}</van-button></div><div v-show="!tip&&haveSign"><van-button type="primary" class="buttonVan" v-if="user_dubbings_count>0">已完成{{user_dubbings_count}}个配音，继续配音</van-button><van-button type="primary" class="buttonVan" v-if="user_dubbings_count<=0">立即配音</van-button></div></section><!--活动结束--><section class="signUpBox" v-show="activityInfo.is_ended==true"><div><div class="signUpNow overActivity">活动已结束</div></div></section><div v-if="showRank" class="blackBg" @click="hideRankUl()"></div><!--微信中--><div class="wxmask" @click="showInWX()" v-show="isWX==true"><div class="share_bg"><span>1. 点击屏幕右上角的按钮</span><span class="span_two">2. 选择在浏览器中打开</span></div></div></div>
</template>
<script>import { Button } from 'vant';export default {components: {[Button.name]: Button,},data: function () {var data1 = {sortByStyle: [{ title: '按点赞/单篇' },{ title: '按播放量/单篇' },{ title: '按点赞和播放量/单篇' },{ title: '按点赞/总和' },{ title: '按播放量/总和' },{ title: '按点赞和播放量/总和' },],activityInfo: {meta_obj: {introduction: "",awards: "",rules: "",results:""}},dubbingList: [],haveSign: false,user_dubbings_count: 0,tip: global.app.tip,showRank: false,rankList: [],active: 'activity',scroll: global.app.detailScroll,rankType: global.app.rank_type,select: -1,selectlink: -1,sortSelect: -1,activeClass: {background: '#eee'},activeGrey: {background: '#f7f7f7'},searchBarFixed: false,isAddZan: false,zanAdd: false,count: '',grayShow: false,isWX: false,page: 1,button_text: '',is_extending: true,showTwoTab: false,}return data1;},created() {var _self = this;_self.activityInfo = global.app.event_detail;//获取最新配音列表this.$http.get('/Dubbing/GetRecentDubbingEventDubbingInfos?eventid=' + global.app.event_id + '&page=1&numberofrows=10', {}).then(function (response) {_self.dubbingList = response.data;}).catch(function (error) {console.log(error);});if (!is_share) {this.$http.get('/Dubbing/UserHasJoinedEvent?eventid=' + global.app.event_id + '&userid=' + global.app.userid, {}).then(function (response) {_self.user_dubbings_count = response.data.user_dubbings_count;}).catch(function (error) {console.log(error);});}},mounted() {this.$nextTick(function () {var _self = this;this.rankLists();_self.scroll = 0;//报名成功之后，底部就变成了立即配音if (!is_share) {if (_self.$route.query.value == "nowDubbing") {global.app.has_joined = true;}_self.showTwoTab = true;}//判断用户是否已报名_self.button_text = "立即报名";if (!is_share) {_self.haveSign = global.app.has_joined;if (_self.haveSign) {_self.button_text = "立即配音";}}//滚动监听事件window.addEventListener('scroll', this.menu);});},methods: {ReplaceNewLine(content){var string = content;try {string = string.replace(/\r\n/g, "<br/>")string = string.replace(/\n/g, "<br/>");} catch (e) {;}return string;},//跳转到官方活动guanActivity() {window.location.href = "/Dubbing/EventHome?userId=" + global.app.userid + '#/';},selfActivity() {window.location.href = "/Dubbing/EventHome?userId=" + global.app.userid + '&tab=users#/';},//排行榜链接跳转linkRankDubbing(e) {if (this.rankType <= global.app.dubbing_rank_type.dubbing_like_download_count_single) {window.location.href = global.app.user_dubbing_url.replace("=dubbing_id", "=" + e.dubbing_id).replace("=uuid", "=" + e.uuid).replace("=action_data", "=" +e.dubbing_id);} else {//window.location.href = "/dubbing/eventworks?userid=" + e.guid_user_id + "&eventid="+global.app.event_id;this.$router.push({ path: '/userdubbing-list/'+e.guid_user_id })}},showInWX() {this.isWX = false;},//打开分享shareSignUp() {var _self = this;//微信内置浏览器if (is_weixin_browser) {this.isWX = true;} else if (!is_share) {//软件内部浏览器if (!!_self.tip) {_self.button_text = _self.tip}else if (!_self.haveSign) {this.$router.push({ path: '/sign-up' })} else {this.$router.push({ path: '/set-dubbing' })}} else {//非微信。非软件内部window.location.href = global.app.app_event_detail_share_url;setTimeout(function () {window.location.href = global.app.download_url;}, 2000)}},touchstartGrey() {this.grayShow = true;},touchendGrey() {this.grayShow = false;},touchstart(i) {this.select = i;},touchend(i) {this.select = -1;},touchstartlink(i) {this.selectlink = i;},touchendlink(i) {this.selectlink = -1;},touchSortStart(i) {this.sortSelect = i;},touchSortEnd(i) {this.sortSelect = -1;},//最新配音列表跳转linkDubbingList(e) {window.location.href = global.app.ting_app_url_schema + "://x-callback-url/tingAction?item_action=24&dubbing_id=" + e.dubbing_uuid + "&uuid=" + e.uuid + "&action_data=" + e.dubbing_uuid ;},//选择排序方式sortLikeCount(i) {this.rankType = i + 1;global.app.rank_type = this.rankType;this.rankLists();this.showRank = false;},//显示隐藏排序方式toggleRank() {this.showRank = !this.showRank;},hideRankUl() {this.showRank = false;},//操作顶部tabactivity() {this.active = 'activity';var a_h = $("#activityIntro").offset().top-40;$('html,body').animate({ scrollTop: a_h }, 400);},lastest() {this.active = 'lastest';var l_h = $("#lastestDubbing").offset().top-40;$('html,body').animate({ scrollTop: l_h }, 400);},rank() {this.active = 'rank';var r_h = $("#rankLlistDetail").offset().top-40;$('html,body').animate({ scrollTop: r_h }, 400);},rankLists() {//排行榜this.page = 0;var _self = this;self.is_extending = true;this.$http.get('/Dubbing/GetDubbingEventUserRanks?eventid=' + global.app.event_id + '&page='+ 1 +'&numberofrows=20&LeaderBoardType=' + this.rankType, {}).then(function (response) {_self.page = 1;_self.rankList = response.data;self.is_extending = false;}).catch(function (error) {console.log(error);self.is_extending = false;});},extendRankLists() {//排行榜var _self = this;self.is_extending = true;this.$http.get('/Dubbing/GetDubbingEventUserRanks?eventid=' + global.app.event_id + '&page=' + (this.page+1) + '&numberofrows=20&LeaderBoardType=' + this.rankType, {}).then(function (response) {_self.page++;_self.rankList = _self.rankList.concat(response.data);_self.rankList = _self.rankList.sort(_self.sortRank);self.is_extending = false;}).catch(function (error) {console.log(error);self.is_extending = false;});},sortRank(a, b) {return a.rank - b.rank;},//监听页面滚动menu() {var _self = this;_self.scroll = document.documentElement.scrollTop || document.body.scrollTop;var menuTop = document.querySelector('#switchModule').offsetTop;//滑动到指定位置菜单吸顶if (_self.scroll > menuTop) {this.searchBarFixed = true} else {this.searchBarFixed = false}//滑动到指定位置相应菜单高亮var a_h = $("#activityIntro").offset().top - 50;var l_h = $("#lastestDubbing").offset().top - 50;var r_h = $("#rankLlistDetail").offset().top - 50;if (_self.scroll < l_h) {this.active = 'activity';} else if (_self.scroll > l_h && _self.scroll < r_h) {this.active = 'lastest';} else if (_self.scroll > r_h) {this.active = 'rank';}//分页加载数据//滚动的距离 +   整个窗口的高度>内容可视区域的高度if (_self.scroll + window.innerHeight >= document.documentElement.offsetHeight) {if (self.is_extending) {return;}_self.extendRankLists();}},},destroyed() {window.removeEventListener('scroll', this.menu)},}</script>
<style>.dubbing_activity {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.slide-right-enter-active,.slide-right-leave-active,.slide-left-enter-active,.slide-left-leave-active {will-change: transform;transition: all .3s ease;position: absolute;width: 100%;left: 0;}.slide-right-enter {transform: translateX(-100%);}.slide-right-leave-active {transform: translateX(100%);}.slide-left-enter {transform: translateX(100%);}.slide-left-leave-active {transform: translateX(-100%);}.rank_style {width: 3.3rem;height: 3.56rem;position: absolute;top: 0.7rem;right: 0.2rem;z-index: 999999;text-align: left;font-size: 0.256rem;color: #444;background: url("/Images/common/bubble_img_white.png") no-repeat;background-size: 100% 100%;background-position: 100% center;}.rank_style_down {top: -3.55rem;background: url("/Images/common/bubble_img_down_white.png") no-repeat;background-size: 100% 100%;background-position: 100% center;padding-bottom: 0.1rem;padding-top: 0.2rem;}.rank_style_top {padding-top: 0.35rem;}.rank_style li {display: flex;align-items: center;width: 3.16rem;height: 0.55rem;padding-left: 0.15rem;line-height: 0.5rem;letter-spacing: 1px;}.board_ul {padding-bottom: 30px;}.isFixed {position: fixed !important;top: 0;z-index: 999;}.isAdd {color: #FF8620;}.dubbing_activity .grayBjHover {position: absolute !important;top: 0;left: 0;width: 93%;height: 40px;z-index: 20;background: rgba(0, 0, 0, 0.2);margin-left: 0.239rem;margin-top: 14px;}.activeSpan {background: #ccc;}.imgbox {display: inline-block;width: 0.393rem;}.selImg {flex: 1;display: inline-block;width: 15px;height: 12px;margin-right: 14px;}.selText {display: inline-block;flex: 10;}.blackBg {position: fixed;top: 0;height: 100%;width: 100%;display: block;background: rgba(0,0,0,.15);z-index: 99999;}.wxmask {position: fixed;height: 62px;width: 100%;top: 0;/* background: rgba(0,0,0,.5); */z-index: 1000;display: block;}.wxmask .share_bg {background: url(/Images/common/share_background.png) center center no-repeat;background-size: 100% 100%;position: fixed;top: 0;right: 0;width: 56%;height: 62px;padding-left: 9px;}.share_bg span {display: block;color: #fff;font-size: 14px;position: relative;top: 13px;}.span_two {margin-top: 3px;}.overActivity {background: #ccc !important;}* {margin: 0px;padding: 0px;}img {width: 100%;vertical-align: middle;}body {background: #f5f5f5;font-size: 0.273rem;}body, html {font-family: PingFangSC-Regular,-apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color: #444444;}.dubbing_activity {padding-bottom: 40px;position: relative;}header, section {background: #fff;}.empty {height: 8px;background: #F8F8F8;border: 1 solid #F0F0F0;}section {padding: 0 0.256rem;}.headerImg {height: 3.21rem;}.headerImg img {height: 3.21rem;}.headerText {padding: 0.358rem 0.256rem;display: flex;}.headerTextL p {font-size: 0.307rem;color: #333333;margin-bottom: 0.137rem;font-weight: 600;}.headerTextL > div {font-size: 0.239rem;color: #666666;letter-spacing: 0;text-align: justify;line-height: 0.358rem;}.headerTextL {flex: 5;padding-right: 0.683rem;}.switchModule {padding: 0;width: 100%;height: 0.819rem;}.switchNavbar {display: flex;position: relative;width: 100%;background: #fff;font-size: 0.307rem;color: #333333;letter-spacing: 0;text-align: justify;}.navbar__item {position: relative;display: block;-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;padding: 13px 0;text-align: center;font-size: 0.256rem;-webkit-tap-highlight-color: rgba(0,0,0,0);}.navbar__item div {width: 54%;margin: 0 auto;}.switchAcitve {color: #51ABFF;border-bottom: 2px solid #51ABFF;}.signUp {height: 69px;background: url("https://static-main.frdic.com/web/dubbing/notice_banner.png") no-repeat;/*background: url("https://static.eudic.net/web/dubbing/notice_banner.png") no-repeat;*/background-size: 100% 100%;display: flex;padding-left: 1.7rem;border-radius: 5px;}.m_sign {display: flex;flex: 1;flex-direction: column;justify-content: center;}.m_sign span {display: block;}.span_top {font-size: 0.273rem;color: #F78530;}.span_bot {font-size: 0.205rem;color: #9B9B9B;}.dubbingNow {flex: 0.6;height: 25px;line-height: 69px;text-align: center;}.dubbingNow a {display: inline-block;width: 1.161rem;line-height: 25px;color: #fff;background: linear-gradient(to right, #F76B1C,#FBDA61 );box-shadow: 0 2px 2px 0 #F4D49E;border-radius: 15px;font-size: 0.205rem;text-align: center;}.sub_title {padding: 20px 0;font-size: 0.307rem;color: #444444;font-weight: bold;}.sub_box {border-radius: 5px;padding: 15px;box-sizing: border-box;}.sub_box span {display: inline-block;margin-top: 15px;font-size: 0.239rem;}.regular_box {}.compit_bg {border: 0.5px solid #D7EBFF;background: #F5FAFF;}.rule_bg {background: #FFFBF3;border: 0.5px solid #FFE7BF;}.reward_bg {background: #F8FFFB;border: 0.5px solid #CDECDD;}.color_blue {color: #478DE5;}.color_grey {color: #8F8F8F;}.sub_box span:first-child {margin-top: 0px;}.min_title {font-size: 0.273rem;text-align: center;font-weight: bold;}.mar_top {margin-top: 15px;}.newlast_dubbing {margin-top: 8px;}.newlestTitle {padding: 20px 0 10px 0;line-height: 0.4rem;}.newlestTitle .new_ttile {font-size: 0.307rem;font-weight: bold;}.newlestTitle .more {float: right;font-size: 0.222rem;color: #A9B0B5;}.dubbing_ul li {height: 1.71rem;border-bottom: 1px solid #EAEAEA;box-sizing: border-box;}.dubbing_ul li {display: flex;align-items: center;text-decoration: none;}.dubbing_ul .li_l_img {flex: 4.4;overflow: hidden;position: relative;}.dubbing_ul .li_l_img img {width: 1.707rem;height: 1.229rem;display: block;border-radius: 5px;}.li_m_title {flex: 8;margin-left: 0.256rem;padding-right: 0.24rem;}.li_m_title .top_title {font-size: 0.273rem;color: #444;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;margin-top: 0;display: -webkit-box;}.li_m_title .min_name {font-size: 0.239rem;color: #8F8F8F;margin: 0.068rem 0;}.li_m_title .bot_date {font-size: 0.239rem;color: #8F8F8F;display: flex;align-items: center;}.play_detail {height: 0.239rem;line-height: 0.27rem;margin-left: 0.3rem;display: flex;font-size: 0.239rem;}.play_detail .playcount {display:inline-block;width: 0.239rem;height: 0.239rem;padding-right: 5px;vertical-align: text-top;}.dubbing_ul .li_r_zan {flex: 1;display: flex;margin-top: -0.887rem;height: 0.307rem;line-height: 0.307rem;align-items: center;}.zan_count {font-size: 0.239rem;color: #8F8F8F;margin-right: 0.1rem;height:18px;line-height:22px;}.userZan {width: 0.307rem;height: 0.307rem;}.leaderboard {margin-top: 8px;position: relative;}.leaderboardTitle {padding: 20px 0 10px 0;}.leaderboardTitle .new_ttile {font-size: 0.307rem;font-weight: bold;}.leaderboardTitle .more {float: right;font-size: 0.222rem;color: #A9B0B5;}.board_ul .num {flex: 1;display: flex;align-items: center;font-size: 0.239rem;color: #8C8C8C;}.person_box .per_img {flex: 2;}.per_img img {width: 0.649rem;height: 0.649rem;border-radius: 50%;border: 1px solid #dfdfdf;}.board_ul li {display: flex;height: 1.161rem;}.board_ul li .person_box {flex: 14;display: flex;align-items: center;border-bottom: 0.5px solid #ECECEC;}.person_box .li_m_title {flex: 8;margin-left: 5px;}.person_box .li_r_zan {flex: 2;display: flex;margin-top: -0.358rem;align-items: center;height: 0.307rem;line-height:0.307rem;}.person_box .userZan {width: 0.307rem;height: 0.307rem;display: inline-block;vertical-align: text-bottom;}.signUpBox {width: 93%;position: fixed;padding: 0.239rem 0.256rem;bottom: 0px;height: 40px;line-height: 40px;z-index: 99998;}.signUpBox .signUpNow {height: 40px;background: #51ABFF;border-radius: 5px;color: #fff;text-align: center;}.blackBj {position: fixed;top: 0;height: 100%;width: 100%;display: none;background: rgba(0,0,0,.3);z-index: 99999;}.signPage {width: 92%;z-index: 999999;position: fixed;}.signPage .sign_title {font-size: 0.307rem;padding: 20px 0;font-weight: bold;}.signPage .sign_detail {font-size: 0.239rem;margin-bottom: 10px;}.sign_detail .left_q {color: #8F8F8F;}.sign_detail .edit {color: #8F8F8F;float: right;}.signOkInfo {font-size: 0.205rem;color: #8F8F8F;}.signUp_box {position: absolute;bottom: 20px;bottom: 0px;width: 92%;height: 40px;line-height: 40px;padding: 0.239rem 0;}.signUp_now {height: 40px;background: #51ABFF;border-radius: 5px;color: #fff;text-align: center;}.inputEmail {padding-bottom: 0.1rem;border: none;/*border-bottom: 1px solid #ccc;*/outline: none;border-radius: 0;}.switchNavbar a {color: #696969;}/*最新配音列表*/.channel_box {position: relative;height: 1.673rem;border-bottom: 0.5px solid #E6E6E6;background-color: #fff;font-size: 0.239rem;padding: 0.24rem 0.239rem;}.channel_contain {height: 1.25rem;padding: 0px;display: flex;align-items: center;}.chan_img {height: 100%;align-items: center;display: flex;flex: 3;}.chan_title {flex: 8;display: flex;flex-direction: column;/*justify-content: center;*/margin-left: 0.256rem;position: relative;height: 100%;}.m_title {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;margin-top: 0;display: -webkit-box;}.m_titledes {font-size: 0.222rem;color: #696969;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;margin-top: 0.1rem;}.chan_title .m_title {color: #444;font-size: 0.273rem;}.chan_title .m_time {color: #858585;font-size: 0.239rem;position: absolute;bottom: 0;display: inline-block}.chan_img img {width: 1.71rem;height: 1.23rem;border-radius: 5px;}.confirm_video {position: fixed;bottom: 0;width: 93%;height: 40px;line-height: 40px;background: #51ABFF;text-align: center;background: #fff;padding: 10px 0.239rem;}.confirm_video span {display: inline-block;width: 100%;height: 40px;line-height: 40px;background: #51ABFF;text-align: center;border-radius: 5px;font-size: 0.239rem;color: #fff;}.chan_bot {display: flex;font-size: 0.201rem;color: #8F8F8F;margin-top: 0.171rem;}.chan_bot .bot_l {flex: 1.7;}.chan_bot .bot_l img {width: 10px;height: 10px;}.bot_l .down_num {margin-left: 3px;}.chan_bot .bot_m {flex: 2;}.chan_bot .bot_m img {width: 10px;height: 10px;}.bot_m .tim_num {margin-left: 5px;}.bot_r {flex: 1;text-align: right;}/*设置配音页面*/body {background: #fff;}.setDubbingBox {background: #fff;}.ul_list {position: relative;padding: 0.239rem;}.ul_list li {display: inline-block;width: 2.87rem;height: 2.5rem;background-color: #fff;font-size: 0.239rem;}.ul_list li:nth-child(even) {float: right;}.video_img {}.video_img img {border-radius: 5px;width: 100%;height: 1.6rem;}img {width: 100%;height: 1.5rem;}.video_title {padding-top: 0.05rem;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;text-overflow: ellipsis;overflow: hidden;color: #444;font-size: 0.256rem;}.van-checkbox {float: left;position: relative;top: 0.5rem;left: 0.1rem;z-index: 99;}.van-checkbox__icon {border-radius: 20px;}.activeVideo {color: #fff;border-color: #06bf04;background-color: #06bf04;}input[type=checkbox] {position: relative;width: 10px;height: 1px;}input[type=checkbox]::before {content: '';position: absolute;top: 0.2rem;left: 0.1rem;width: 22px;height: 22px;line-height: 22px;text-align: center;color: white;font-size: 0.239rem;background-color: transparent;border: 1px solid #999;border-radius: 30px;}input[type=checkbox]:checked::before {font-family: FontAwesome;color: #fff;border-color: #06bf04;background-color: #06bf04;content: "\f00c";}.confirm_video {position: fixed;bottom: 0;width: 100%;height: 40px;line-height: 40px;background: #51ABFF;text-align: center;}.confirm_video span {color: #fff;}.ch_label {position: absolute;display: inline-block;width: 2.87rem;height: 1.6rem;}body.en .newWeui-btn {background: #43a1c7;}body.en .newWeui-btn_plain-primary {border: 1px solid #43a1c7;}body.de .newWeui-btn {background: #37ac1a;}body.de .newWeui-btn_plain-primary {border: 1px solid #37ac1a;}body.fr .newWeui-btn {background: #2695e0;}body.fr .newWeui-btn_plain-primary {border: 1px solid #2695e0;}body.es .newWeui-btn {background: #a6203b;}body.es .newWeui-btn_plain-primary {border: 1px solid #a6203b;}.buttonVanNone {background: #fff !important;}.buttonVan {width: 100%;height: 40px !important;line-height: 40px !important;font-size: 16px !important;}.buttonVanShort {width: 100%;height: 40px !important;line-height: 40px !important;background: #fff !important;color: #51abff !important;border-color: #51abff !important;font-size: 16px !important;}.signUpBox .van-button {margin: 0;padding: 0;width: 100% !important;}.topMar {padding-top: 10px;}.btntwobox {margin-bottom: 20px;position:relative;}.btntwobox li {display: inline-block;padding: 9px 0;line-height: normal;width: 47.5%;background: #FAFAFA;border: 0.5px solid #EEEEEE;border-radius: 5px;text-align: center;font-size: 0.239rem;}.btntwobox img {width: 0.273rem;height: 0.273rem;margin-right: 10px;position: relative;top:-1px;}.btntwobox .liright {float: right;}
</style>

完整页面展示（一个页面，从上往下滑动的截图）：

vue 监听滚动事件之菜单滚动吸顶点击滑动到指定位置点击高亮相关推荐

Vue监听滚动条事件点击回到顶部
Vue监听滚动条事件点击回到顶部监听滚顶条事件: created () {this.listenerFunction(); }, beforeDestroy () {document.remove ...
vue 监听某div滚动条的滚动事件
监听此div , 定义ref <div class="productSec" ref="rightContent" @mousewheel="s ...
vue:监听滚动条事件
由于某些原因,我不得不手工用ant design vue的a-row和a-col拼凑了一个表格,好不容易添加了水平滚动条,然后发现只要拖动滚动条,左表头未设置右边框的问题就被暴露了(为什么没有设置右边 ...
vue监听滚动条事件
代码 ...省略...mounted() {// 监听页面滚动事件window.addEventListener("scroll", this.scrolling);}, meth ...
vue——监听鼠标中键（滑轮）滚动
实现场景:通过滚动中键切换图片等 mounted() {window.addEventListener('wheel', this.handleMouseWheel, {passive: false, ...
vue 监听页面滚动事件：触发animate.min.css动画特效
一.问题答疑: 1. animate.css 如何在vue项目中引入?或引用? 2. 如何监听滚动事件,触发animate.class动画播放? vue 监听滚轮滚动事件,for循环 ,动态id,代码 ...
vue监听滚动事件，实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en">& ...
vue监听滚动事件实现某元素吸顶或者固定位置显示
vue监听滚动事件实现某元素吸顶或者固定位置显示最近写了一个VUE的web app项目,需要实现某个部位吸顶的效果.即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示. 1.监听滚动事件 ...
vue监听页面滚动事件
方法:监听滚动实现通过addEventListener方式监听通过scroll获取到滚动 export default {data () {return {topNavBg: {backgroun ...

vue 监听滚动事件之菜单滚动吸顶点击滑动到指定位置点击高亮

vue 监听滚动事件之菜单滚动吸顶点击滑动到指定位置点击高亮相关推荐

最新文章

热门文章