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

分别用jquery和vue实现滚动头部吸顶效果 附代码当我们滚动页面滚动条的时候,有时候头部会吸附在页面顶部,这个就叫做吸顶效果,比较常见。切图网(qietu.

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

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

切图网(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/

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/76951.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信