需求:页面头部导航栏固定,出现横向滚动时,导航栏跟随滚动
<template>
<div class="view-header" id="view-header-fixed" :class="{ 'view-header-scroll': appScroll }">
<div class="header-container"></div>
</div>
</template>
<script>
mounted() {
// 关键
window.onscroll = function() {
var sl = -Math.max(document.body.scrollLeft, document.documentElement.scrollLeft) // 获取滑动距离
document.getElementById('view-header-fixed').style.left = sl + 'px' // 设置元素的偏离距离
}
}
</script>
<style scoped lang="scss">
.view-header {
position: fixed;
top: 0;
left: 0;
background: white;
height: 80px;
width: 100%;
min-width: 1440px;
z-index: 1001;
}
</style>