一、html部分
<div class="fix-btn" :style="sidebarWith==200?'left:210px;':'left:76px;'">
<div style="display: flex;flex-direction: column">
<div style="font-size: 14px;color: #333;font-weight: normal">
<span></span>
</div>
<div style="display: flex;justify-content: space-between;align-items: center">
<div><i-button type="default" style="width:100px;">返回</i-button></div>
<div style="">
<i-button type="default" style="width:100px;margin-right:10px;">保存</i-button>
</div>
</div>
</div>
</div>
二、js部分
<script>
new Vue({
el: '#app',
data: function() {
return{
sidebarWith: $('.sidebar').width()
}
},
mounted:function(){
$(window).resize(function() {
return (function() {
_this.sidebarWith = $('.sidebar').width();
})()
})
window.addEventListener("scroll", _this.fixedMenu); //监听滚动事件
//$(document).ready(function(){
//获取元素距浏览器顶部的高度
//var gerTop = $('.ger_tbmu').offset().top;
//监控滚动栏scroll
//$(document).scroll(function(){
//获取当前滚动栏scroll的高度
//var scrTop = $(window).scrollTop();
//如果元素距顶部的高度 等于 当前滚动栏的高度,开始悬浮;否则清空悬浮
//if(scrTop >= gerTop ){
// $('.ger_tbmu').css({'position':'fixed','top':'0','z-index':'9999'});
//}else{
// $('.ger_tbmu').css({'position':'','top':'','z-index':''});
//}
//})
})
},
methods: {
fixedMenu: function() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > 50){
$('.fix-btn').css('top', '60px');
} else {
$('.fix-btn').css('top', '100px');
}
},
},
})
</script>
},
methods: {
fixedMenu: function() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > 50){
$('.fix-btn').css('top', '60px');
} else {
$('.fix-btn').css('top', '100px');
}
},
},
})
</script>
三、图片示例
默认:
滑动滚轮后置顶:
//另附监听自定义div的滚动条事件方法
mounted() {
this.$nextTick(() => {
const [mainScrol] = document.getElementsByClassName('el-main') //获取div元素
mainScrol.addEventListener('scroll', () => {
this.scrollTop = mainScrol.scrollTop
if (this.scrollTop > 20) {
this.ifFixed = true //滚动条距离大于20px的事件处理
} else {
this.ifFixed = false
}
})
})
},