分别用jquery和vue实现滚动头部吸顶效果 附代码

大家好，欢迎来到IT知识分享网。

当我们滚动页面滚动条的时候，有时候头部会吸附在页面顶部，这个就叫做吸顶效果，比较常见。

切图网（qietu.com）长期致力于web前端开发切图等服务，其中在网站上实现 滚动头部吸顶是比较常见的效果之一，效果比较简单手写几行js代码即可实现，以前大部分是基于jquery语法实现，现在vue比较盛行，也有需要用vue来实现的，下面分别用jquery和vue实现滚动头部吸顶效果 附代码，一来做个笔记，而来分享给大家

用jquery实现滚动头部吸顶效果代码片段

$(window).bind(‘scroll’,function() {
if(Math.abs($(window).scrollTop())>300)
{
$(‘.qui-naver.js’).hide().addClass(‘fixed’).fadeIn(‘slow’);
}
else
{
$(‘.qui-naver.js’).removeClass(‘fixed’);
}
});

用vue实现滚动头部吸顶效果代码片段

<template>
<div class=”container”>
<div class=”sticky-header” :class=”{ ‘is-sticky’: isSticky }”>
<!– 这里是固定在顶部的内容 –>
</div>
</div>
</template>

<style>
.container {
height: 1000px; /* 设置容器高度，使得可以滚动 */
}

.sticky-header {
position: relative; /* 设置相对定位 */
}

.is-sticky {
position: fixed; /* 设置固定定位 */
top: 0; /* 设置固定在顶部 */
}
</style>

<script>
export default {
data() {
return {
isSticky: false
}
},
mounted() {
window.addEventListener(‘scroll’, this.handleScroll)
},
destroyed() {
window.removeEventListener(‘scroll’, this.handleScroll)
},
methods: {
handleScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop
this.isSticky = scrollTop > 100 // 当页面滚动超过100px时启用固定
}
}
}
</script>

最后不得不说，过去jquery有多火，现在的vue就有多火，两者是基于不同的逻辑的，适用于不同的场景，两者都是非常优秀的js框架，jquery足够锋利，而vue用于写复杂的dom交互逻辑 也是非常的干练简洁。

原文链接 http://www.qietu.com/jquery-vue-gundong-toubu-xiding/