开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

原生js实现吸顶效果

吸顶效果是一种常见的网页设计技巧，它使得页面的某个元素（如导航栏）在用户滚动页面时始终保持在视口的顶部。使用原生JavaScript实现吸顶效果，可以通过监听滚动事件并动态改变元素的样式来实现。

基础概念

吸顶效果通常涉及到以下几个概念：

滚动事件：监听页面的滚动行为。
视口（Viewport）：浏览器窗口中显示页面内容的区域。
固定定位（Fixed Positioning）：CSS属性，使元素相对于浏览器窗口固定位置。

实现步骤

HTML结构：创建一个需要固定在顶部的元素。
CSS样式：设置元素的初始样式和固定定位样式。
JavaScript逻辑：监听滚动事件，根据滚动位置切换元素的样式。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Header</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header id="stickyHeader">Sticky Header</header>
    <div class="content">
        <!-- 页面内容 -->
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

#stickyHeader {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    text-align: center;
    width: 100%;
    transition: top 0.3s;
}

.sticky {
    position: fixed;
    top: 0;
    z-index: 1000;
}

.content {
    height: 2000px; /* 仅用于演示滚动效果 */
}

JavaScript (script.js)

window.addEventListener('scroll', function() {
    var header = document.getElementById('stickyHeader');
    var sticky = header.offsetTop;

    if (window.pageYOffset > sticky) {
        header.classList.add('sticky');
    } else {
        header.classList.remove('sticky');
    }
});

优势与应用场景

用户体验：保持导航栏或其他重要元素在视口顶部，方便用户随时访问。
响应式设计：适用于各种屏幕尺寸和设备。
广泛应用：常见于电商网站、社交媒体平台和企业官网。

可能遇到的问题及解决方法

性能问题：频繁触发滚动事件可能导致性能下降。
- 解决方法：使用requestAnimationFrame优化滚动事件处理，减少重绘次数。

var ticking = false;

window.addEventListener('scroll', function() {
    if (!ticking) {
        window.requestAnimationFrame(function() {
            var header = document.getElementById('stickyHeader');
            var sticky = header.offsetTop;

            if (window.pageYOffset > sticky) {
                header.classList.add('sticky');
            } else {
                header.classList.remove('sticky');
            }
            ticking = false;
        });
        ticking = true;
    }
});

兼容性问题：不同浏览器对滚动事件和固定定位的支持可能有所不同。
- 解决方法：使用CSS前缀和特性检测确保兼容性。

通过以上步骤和代码示例，你可以实现一个简单的吸顶效果，并根据需要进行优化和调整。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

ue实现吸顶的效果

}, mounted() { window.addEventListener("scroll", this.initHeight); }, methods: { // 实现吸顶效果

4721 0

原生JS实现分页效果

做开发久了，会越来越依赖框架，毕竟利用框架可以快速的完成工作任务，如常见的分页效果，只需要与后端配合，由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能，就可以轻松的实现分页效果，那如果在不依赖框的情况下利用原生...JS如何实现一个分页效果呢？...接下来给大家分享一段分页代码实现下面的效果。 ? 原生...JS实现分页效果 a { margin: 5px; }

12.4K1 0

原生JS实现魔方效果

给大家分享一个用原生JS实现的魔方效果，效果如下：以下是代码实现：原生JS实现魔方效果 <style type=

7.3K1 0

原生js实现图片轮播效果

-- 图片部分,style部分设置便于js中改变偏移量，从而实现图片轮播--> 14 15...-- 箭头部分，实现下一张，上一张效果 --> 25 < 26...-- html body部分加载完成，最后调用js,进行操作；否则无法有效操作 --> 40 js"></script...{ 92 background-color: red; 93 } 94 .point span:active{ 95 background-color: gold; 96 } 1.js...(); 14 } 15 // 点击左箭头，上一张图片 16 arrow_left.onclick = function() { 17 prev_pic(); 18 } 19 20 // 函数实现下一张浏览效果

17.1K6 0

JS 吸顶导航，告别“回到顶部”

本文主要内容 1、吸顶导航是什么 2、吸顶导航的实现方法 3、小结 1、吸顶条导航是什么如图：吸顶导航栏的初始位置一般是靠近在页面的顶部位置，但是又存在一定距离，通常这块区域放置最为醒目或者重要元素的地方...明白了吸顶导航条的基本效果，下面写个简单的demo吧。 2、吸顶导航的实现方法一、样式结构搭建考虑到触发吸顶功能，需要为导航条设置触发后的样式。 JS底层知识，面试真题、相关技术、未来发展等。...//移出fixed tit.className = "clearfix"; } } 实现效果...： 3、小结吸顶导航的交互方式极大的提高了用户体验，是电商网站网站最常用的交互效果之一，希望本文能给大家带来一些帮助。

7.7K7 0

Js如何实现当网页超过一屏时导航菜单始终置顶-吸顶盒效果

前言我们平时在逛一些电商网站时,无论是首页还是详情页,通常会有一个导航菜单石红跟随着页面,无论是页面滚动到中间还是底部这是为了方便用户查看商品的各类信息或提交订单购物也就是吸顶盒效果,那这个效果是怎么实现的...原生Js 如下是原生js // 初始化函数 function init() { // 获取顶部元素的DOM var wrap = document.getElementById("wrap...wrap" class="wrap"> 总结要想实现一个层始终固定在屏幕的顶部或底部

3.4K5 0

原生JS实现Tab切换效果和模态框效果

原生JS实现Tab切换效果效果展示 <!...tabPanels[index].classList.add('active'); } }) 原生...JS实现模态框效果效果展示 <!

9.8K5 0

通过原生JS实现打分（打星）效果

要实现一个简单的打星效果，分为以下几步，简单来说，先这样。。。然后那样。。。再这么着。。。就好了！！！然后我们就把星星放到页面了如下图所示 [image.png] 然后就要进行JS...--接着我们就要做效果了，因为要实现鼠标移入出现效果，移出取消预览效果，点击确定效果，所以需要加入三个事件，为了方便获取点击位置并添加相应效果，我们要为点击内容获取该下标--> for (let i =...--移入事件如下，我们需要为所点击的对象及之前所有的星星进行效果添加--> function fn1() { var num=this.getAttribute('index') oSpan.innerHTML

1.4K2 0

RecyclerView 居然还能实现吸底效果

这些天遇到一个列表数据吸底需求，如果不满一屏就全部展示，如果超过一屏就让底部悬浮在屏幕底部。大概效果如下图： ?...ItemDecoration实现分组悬停原理接下来我们来讲解如何使用ItemDecoration来实现底部View悬浮效果。...接触过ItemDecoration的同学知道，通过自定义ItemDecoration就可以实现酷炫的分组悬停效果。...分组悬停实现方式一：getItemOffsets预留空间，onDrawOver中重新绘制悬停View，不复用先看下不添加ItemDecoration的效果： ?...ItemDecoration实现吸底效果我们的这个吸底效果跟分组悬停效果是有所不同的，分组悬停效果针对的是第一个可见的子View，吸底效果针对的是最后一个可见的子View。

3.1K2 0

原生JS快速实现拖放（drag and drop）效果

拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生js实现起来也非常的方便。...接下来我们就用原生js和css快速实现这样的拖放效果： HTML HTML的内容很简单，就是五个空的容器和一个可以被拖拽的元素： html： <div class="droppable...CSS 在实现样式的时候，除了实现静态的样式，一些过渡状态也需要增加样式以提升视觉体验：1. 元素被拖动的过程中增加边框等效果；2....JS 最后，我们需要通过js监听draggable和droppable的相关的事件。...当draggable元素被拖动时，原来容器中的draggable元素并不会消失，需要我们手动将其隐藏（class设置为invisible），如果同步操作会立马触发dragend事件导致拖动效果消失，所以在

3.6K5 1

30秒实现Vue吸顶效果

1、滚动前： 2、滚动中： 3、滚动超过后：直观效果可参pc端微博左侧的信息栏 ---- 第一步：html 中：在你要实现吸顶效果的div上，加上如下这一行代码： :class="{'is_fixed...' : isFixed}" 触发吸顶效果的位置，如下：第二步：data 定义中： data() { return { isFixed...window.removeEventListener('scroll', this.handleScroll) }, 第四步：在 methods 方法定义中： /********* start-目录吸顶...scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop //如果被卷曲的高度大于吸顶元素到顶端位置...true : false; }, /********* end-目录吸顶********/ 最后一步：在css中： .is_fixed{ width: 100%; position:

9382 0

使用原生JS实现鼠标点击爱心效果！！！

使用原生JS，实现鼠标点击爱心效果！！！引言：在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果，对于用户而言，这样的体验是很极致的。其实实现起来也很简单，下面一起来学习一下吧。...文末附上完整代码，可以复制关键部分直接使用到自己的页面上实现效果 ?...文本上升效果 let i = 0 setInterval(() => { _this.style.top = this.y - 20 - i + 'px' i++ }, 10); 由于原生...js中直接操作动画帧的样式比较复杂，所以采用定时器实现相同的功能，将标签的top值逐渐减小，这样标签就会实现上升的效果 4....文字逐渐变淡效果 @keyframes remove { 100% { opacity: 0; } } 逐渐变淡的效果是通过css3动画来实现的很简单，动画是通过js来给元素绑定的

4.9K3 0

圆盘时钟效果原生JS

圆盘时钟旋转时钟数字时钟写在前面仿荣耀手机时钟，设计的同款时钟效果实现效果 ?...实现原理数字时钟利用Date内置对象获取当下的时间，通过处理呈现在页面上这一步获取时间是非常简单的，通过Date下的一些属性就可以实现了 2....背景采用的是一个炫彩流光的效果，利用了CSS3新增的动画效果这部分的炫彩流光效果在之前的博客中有详细讲到炫彩流光效果指针时钟通过定位将三根针重叠在一起，下端对齐都摆在原点，通过transfrom-origin...rot.style.display = 'none'; clocker.style.display = 'block'; } 由于还没有学习canvas，技术水平不足，表盘的效果没有办法实现...，圆环的实现，也只是通过了简单的裁剪，想不到实现圆弧的效果代码有点长，如需完整代码，可以留言或私信

11.7K2 0

原生js实现淡入淡出轮播图效果

下面为原生js写出来的轮播图淡入淡出效果，源代码能够正确运行。 1.效果展示 2.源代码 swiper.html js"> swiper.js...pointer; user-select: none; } .dynamic span.active { background: #69aae7; } 3.总结：轮播图还有左右无缝轮播等多种效果

1751 0

【CSS】398- 原生JS实现DOM爆炸效果

分享内容介绍通过原生js代码，实现粒子爆炸效果组件组件开发过程中，使用到了公司内部十分高效的工程化环境，特此打个广告：新浪移动诚招各种技术大大！可以私聊投简历哦！效果预览 ?...css操作态变换（如focus）使子元素执行动画 `不可取，效果可多次连点，css状态变换与需求不符` Js 控制动画开始，事先写好css动画预置，通过class 包含选择器切换动画例如：.active...组件结构由截图分享，动画可以分为两个模块，首先，随机发散的粒子具有共性：抛物线动画，淡出，渲染表情而例子数量变多之后则为截图中的效果但是，由于性能原因，我们需要做到粒子的掌控，实现资源再利用，那么还需要第二个模块...，作为粒子的管控组件所以：此功能可使用两个模块进行开发：partical.js 粒子功能与 boom.js 粒子管理实现 Partical.js 1....结尾可能效果中实现的思维还有不妥和欠缺，欢迎各位大大提出宝贵意见，互相交流、学习！

3.5K7 0

第54天：原生js实现轮播图效果

通过计算偏移量利用定时器实现自动播放，或通过手动点击事件切换图片。 ? 二、Html布局首先父容器container存放所有内容，子容器list存放图片。...#prev { left: 20px; } #next { right: 20px; } 四、Js...首先我们先实现出手动点击左右两个箭头切换图片的效果： window.onload = function() { var list = document.getElementById

6.7K2 1

微信小程序实现吸顶、网格、瀑布流布局

微信小程序开发通常是在webview模式下编写，但是对小程序的渲染性能有一定的追求，就需要使用Skyline模式进行渲染，同时在这种模式下有也有一些特殊的组件，可以轻松的实现想要的效果，本文将介绍在Skyline...模式下如何实现吸顶、网格、瀑布流布局。...主要组件介绍 1. sticky-section 吸顶布局容器；仅支持作为模式的直接子节点。...2. sticky-header 吸顶布局容器；仅支持作为模式的直接子节点或 sticky-section 组件直接子节点。...以下是上面JavaScript代码中引入的本地模拟数据文件data.js代码： // data.js const landscapeList = [ 'https://res.wx.qq.com

2.1K0 1

【前端词典】4 种滚动吸顶实现方式的比较

后来在项目中总会遇到滚动吸顶的效果需要实现，现在我将我知道的 4 种滚动吸顶实现方式做详细介绍。...() 的结合，我们也可以实现滚动吸顶效果。...三、使用原生的 offsetTop 实现我们知道 offsetTop 是相对定位父级的偏移量，倘若需要滚动吸顶的元素出现定位父级元素，那么 offsetTop 获取的就不是元素距离页面顶部的距离。...我们一定需要使用 scrollTop-offsetTop 的值来实现滚动吸顶的效果吗？答案是否定的。我们一同看看第四种方案。...解决方案为这个吸顶元素添加一个等高的父元素，我们监听这个父元素的 getBoundingClientRect().top值来实现吸顶效果，即： <div class="title_box" ref="

2.5K6 0

年度实用技巧 | 页面上吸顶的效果是怎么做到的

——莎士比亚上篇习题解析上一篇结尾留了一个小习题，我们先来看一下，上下两层结构有重合是如何实现。一般下实现重合效果的方式是使用定位。定位元素可以和其他元素重叠。...知识点讲解今日主要讲讲页面上的定位效果是如何实现的。有趣的定位效果下面这些好玩的展示效果都是通过定位实现的。...吸顶超出父容器重叠元素粘性定位知识点定位以下知识内容来自于菜鸟教程属性名作用属性值position指定了元素的定位类型。static 定位HTML 元素的默认值，即没有定位，遵循正常的文档流对象。...实现方案类型实现方案吸顶使用fixed定位的元素的位置相对于浏览器窗口是固定位置，可以实现吸顶的效果。超出父容器使用absolute绝对定位的元素的位置相对于最近的已定位父元素，可以超出父元素。...总结今天讲解的定位功能，通过对元素的position属性设置不同的值，实现不同的展示效果。有时候学习并不困难，如何应用是关键，所以，想要熟练的掌握前端知识，还需要不断的练习和应用。

1182 0

实现博客园的日历效果的原生js插件

下面是calendar.js插件文件的代码。...//js日历 (function(){ var calendar = function(calendarId){ //日历对象不存在，返回日历 if(!...} } } })(); } window.calendar = calendar; })(); 引用方式很简单，只需引入这个js...实例化calendar实例即可: //只需实例化calendar实例即可，传入的参数为html对象的id，举个例子如下 new calendar('calen'); 效果就是我的博客右边那个日历

2.9K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭