开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js实现吸顶图片

在JavaScript中实现吸顶图片（也称为固定定位图片或粘性头部图片），通常是通过CSS的position: fixed;属性配合JavaScript来完成的。以下是实现吸顶图片的基础概念、优势、应用场景以及具体的实现方法。

基础概念

吸顶图片是指当用户滚动页面时，图片始终保持在视口的顶部，不随页面滚动而滚动。

优势

用户体验：提供一致的导航或品牌标识，方便用户随时访问主要功能或信息。
视觉效果：增强页面的视觉吸引力，使页面看起来更专业。

应用场景

网站头部导航栏中的logo。
固定的广告横幅。
固定的社交媒体图标。

实现方法

以下是一个简单的示例，展示如何使用JavaScript和CSS实现吸顶图片。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吸顶图片示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="sticky-header">
        <img src="path/to/your/image.jpg" alt="吸顶图片" class="sticky-image">
    </header>
    <div class="content">
        <!-- 页面内容 -->
        <p>滚动页面以查看吸顶图片效果。</p>
        <!-- 添加更多内容以使页面可滚动 -->
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

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

.sticky-header {
    background-color: #f1f1f1;
    padding: 10px 20px;
    text-align: center;
}

.sticky-image {
    width: 100px; /* 根据需要调整图片大小 */
    height: auto;
}

.content {
    padding: 20px;
    height: 2000px; /* 增加页面高度以使页面可滚动 */
}

JavaScript (script.js)

window.addEventListener('scroll', function() {
    const header = document.querySelector('.sticky-header');
    const sticky = header.offsetTop;

    if (window.pageYOffset > sticky) {
        header.style.position = 'fixed';
        header.style.top = '0';
        header.style.width = '100%';
    } else {
        header.style.position = '';
        header.style.top = '';
        header.style.width = '';
    }
});

解释

HTML：创建一个包含图片的<header>元素，并为其添加一个类名sticky-header。
CSS：设置基本的样式，确保图片在初始状态下正常显示。
JavaScript：添加一个滚动事件监听器，当页面滚动时检查图片是否到达视口顶部。如果是，则将图片的定位设置为fixed，并固定在顶部。

常见问题及解决方法

图片跳动或闪烁：确保在CSS中正确设置了position: fixed;和其他相关属性，避免与其他元素的样式冲突。
图片覆盖其他内容：可以通过调整z-index属性来确保图片在其他元素之上。

通过以上方法，你可以轻松实现一个简单的吸顶图片效果。根据具体需求，你可以进一步调整样式和JavaScript代码以适应不同的应用场景。

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

有帮助

没帮助

相关·内容

ue实现吸顶的效果

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

4721 0

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

本文主要内容 1、吸顶导航是什么 2、吸顶导航的实现方法 3、小结 1、吸顶条导航是什么如图：吸顶导航栏的初始位置一般是靠近在页面的顶部位置，但是又存在一定距离，通常这块区域放置最为醒目或者重要元素的地方...明白了吸顶导航条的基本效果，下面写个简单的demo吧。 2、吸顶导航的实现方法一、样式结构搭建考虑到触发吸顶功能，需要为导航条设置触发后的样式。 JS底层知识，面试真题、相关技术、未来发展等。...二、吸顶功能添加 1.实现思路是监听 scroll 事件，判断当前页面的滚动位置，当滚动距离大于导航条距顶部的距离时，为导航条采用窗口定位。...2.与“回到顶部“的实现方法一样，但是会发现实现吸顶功能时，到了临界位置时，页面会抖动一下，因为当导航条fixed出去，下部内容填补了导航条离开的位置。抢占了导航条的位置，所以抖动了一下。

7.7K7 0

页面中元素的吸顶

[需求] 滚动页面到顶部，实现某元素固定到顶部效果点击某个按钮，页面滚动到相应的位置滚动页面，当到达某个位置时，高亮对应的相关按钮 [元素吸顶实现方式] 关于元素吸顶效果，通过查阅相关资料和相关测试...： .sticky-box{ position: sticky; position: -webkit-sticky; top: 60px; //可通过js动态设置 } [3.兼容性] 通过查看...this.isFixed = scrollTop > offsetTop; } } [三、使用getBoundingClientRect().top] 还有一种更为直接的方式，可以实现吸顶效果...，就是使用getBoundingClientRect().top来获取元素相对于视口（浏览器窗口）的位置，相对于offsetTop，该方法不用考虑到吸顶元素的父级元素和页面滚动条的高度，直接对该元素进行处理即可...，不包含滚动的距离 this.offsetTop 表示的是吸顶元素距离顶部的条件值（一般项目需求是0） */ let tabOffsetTop = this.

1.3K3 0

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

模式下如何实现吸顶、网格、瀑布流布局。...主要组件介绍 1. sticky-section 吸顶布局容器；仅支持作为模式的直接子节点。...2. sticky-header 吸顶布局容器；仅支持作为模式的直接子节点或 sticky-section 组件直接子节点。...按需渲染节点，比 Webview 兼容实现具备更好的性能。 3. 所有代码实现 1. 以下是WXML文件代码 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="...描述：当页面往下滚动时，吸顶元素需要等页面滚动停止之后才会出现吸顶效果当页面往上滚动时，滚动到吸顶元素恢复文档流位置时吸顶元素不恢复原样，而等页面停止滚动之后才会恢复原样原因：在 ios 系统上不能实时监听

2.5K6 0

移动端吸顶fixbar解决方案

需求背景经常会有这样的需求，当页面滚动到某一个位置时，需要某个页面元素固定在屏幕顶部，并且有时需要连续滚动吸顶。...在PC端主要的实现是通过 CSS 的 position: fixed 属性，但是在移动端，尤其是在安卓端，存在诸多的兼容性问题。...问题 position：fixed给移动端带来的问题： IOS8在页面滚动时，吸顶不连续；页面滑动时，不见吸顶，页面滚动停止后，吸顶缓慢出现滚动到顶部之后，会出现两个一样的吸顶, 过一会才恢复正常。...安卓滚动距离超过某位置时，js动态设置样式；为了防止惯性滚动引起的fix不及时的情况，在 touchstart、 touchmove 、 touchend 事件都进行监听。...setTimeout(scrollHandler, 1000); }); } 不支持sticky 如果浏览器不支持position:sticky，那么就使用js

3K3 0

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

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

3.4K5 0

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

后来在项目中总会遇到滚动吸顶的效果需要实现，现在我将我知道的 4 种滚动吸顶实现方式做详细介绍。...三、使用原生的 offsetTop 实现我们知道 offsetTop 是相对定位父级的偏移量，倘若需要滚动吸顶的元素出现定位父级元素，那么 offsetTop 获取的就不是元素距离页面顶部的距离。...我们一定需要使用 scrollTop-offsetTop 的值来实现滚动吸顶的效果吗？答案是否定的。我们一同看看第四种方案。...解决方案为这个吸顶元素添加一个等高的父元素，我们监听这个父元素的 getBoundingClientRect().top 值来实现吸顶效果，即： <div class="title_box" ref=...描述：当页面往下滚动时，吸顶元素需要等页面滚动停止之后才会出现吸顶效果当页面往上滚动时，滚动到吸顶元素恢复文档流位置时吸顶元素不恢复原样，而等页面停止滚动之后才会恢复原样原因：在 ios 系统上不能实时监听

2.2K3 0

基于 Vue 的两层吸顶踩坑总结

废话不多说，先看一下两层吸顶的最终实现效果，如下图所示。 ?...图片.gif 功能点：两层吸顶，因为 Tabs 区域比较长所以在滚动过程中点击一层 Tabs 会回弹至一层吸顶刚吸顶的位置，这个功能点和锚点有些类似。...实现方式本文主要通过 VueSticky 插件来实现吸顶，实现步骤描述如下：安装：npm install vue-sticky --save 引入: import VueSticky from...主要原因：第一层吸顶还符合吸顶条件，第二层吸顶已经开始消失解决方案：给第一层吸顶元素添加 minHeight 属性，其大小为第一层吸顶元素的高度与第二层吸顶元素的高度的和。...图片懒加载对于图片过多的页面，为了加速页面的加载速度，我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。

1.5K2 0

JS实现图片循环滚动

之前在前端的时候有遇到这样一个问题，实现 JS 图片的循环滚动，然后鼠标移入的时候停止滚动，鼠标移开继续滚动，这里无非就是设置了一个定时器，鼠标移上时清除定时器达到滚动停止的目的，鼠标移开时重设定时器，...DOCTYPE> JS实现图片循环滚动 #roll {

19.8K3 0

js实现图片预览翻页

原文地址可以直接复制粘贴打开，图片是在线的，原理简单好懂！效果源码 js"> <meta...= document.getElementById("pre"); var next = document.getElementById("next"); //要切换图片就是要修改...但是返回的是数组，所以你得操作的是数组中的对象 var img = document.getElementsByTagName("img")[0]; //创建一个数组用来保存图片的路径

4553 0

JS实现关闭图片窗口

JS实现关闭图片窗口有趣的小案例池子： JS实现定时器 JS实现关闭图片窗口 JS实现输入检验获取焦点后隐藏提示内容的输入框 JS实现获取鼠标在画布中的位置聊天信息框显示消息...JS点击切换背景图自动切换背景的登录页面 JS制作跟随鼠标移动的图片 JS实现记住用户密码结果演示概述通过事件的绑定来实现，关闭网页中某个图片窗口的效果。...构建HTML框架图片 <img src="https://upload-bbs.mihoyo.com/upload...*/ width: 60px; height: 60px; /* 设置图片的上方外边距 */ margin-top..., sans-serif; /* 设置鼠标悬浮在上面的时候的样式 */ cursor: pointer; } JS

270 0

JS实现图片弹窗效果

中间磨磨唧唧从原生JS找到JS插件，浪费了不少精力和时间，但是也磕磕碰碰学到了些知识，建议读者：想学一下弹窗的JS实现代码的可以看看前两小节，只想实现效果的，直接复制源码就行！...一点击鼠标实现弹出/隐藏图片 ? 实现原理：一个div做容器，里面包含了二维码图片，把标题（鼠标点击的目标）做一个onclick监听，用div的display属性控制图片的显示和隐藏。...实现原理：当点击标题链接onclick监听或者刷新网页时候，获取隐藏的二维码图片对象并弹出，点击关闭或者二维码图片外的区域则隐藏二维码图片display = "none"。类似上面例子原理。..., 关闭弹窗，实现点击空白处关闭图片 modal.onclick = function () { modal.style.display = "none"; //...利用jquery.popup.js可以实现图中炫酷的动画效果, 支持animate.css。

23.8K3 0

JS实现图片懒加载

懒加载的实现原理由于网页中占用资源较多的一般是图片，所以我们一般实施懒加载都是对图片资源而言的，所以这里的实现原理主要是针对图片。...大家都知道，一张图片就是一个标签，而图片的来源主要是src属性。浏览器是否发起亲求就是根据是否有src属性决定的。...实现步骤及Demo 1.先介绍几个和懒加载相关的API document.documentElement.clientHeight//获取屏幕可视区域的高度直观的图解： element.offsetTop...可能到这里还有一些人不知道怎么实现，我们还是用图来展示一下：看了这张图，我们就得出了一个判断公式：如果：offsetTop-scroolTop图片进入了可视区内，则被请求...2.代码实现下面的代码就是根据以上公式实现的： <!

11.4K2 0

基于 Vue 的两层吸顶踩坑总结

废话不多说，先看一下两层吸顶的最终实现效果，如下图所示。 ?...图片.gif 功能点：两层吸顶，因为 Tabs 区域比较长所以在滚动过程中点击一层 Tabs 会回弹至一层吸顶刚吸顶的位置，这个功能点和锚点有些类似。...实现方式本文主要通过 VueSticky 插件来实现吸顶，实现步骤描述如下：安装：npm install vue-sticky --save 引入: import VueSticky from...主要原因：第一层吸顶还符合吸顶条件，第二层吸顶已经开始消失解决方案：给第一层吸顶元素添加 minHeight 属性，其大小为第一层吸顶元素的高度与第二层吸顶元素的高度的和。...图片懒加载对于图片过多的页面，为了加速页面的加载速度，我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。

7661 0

原生js实现图片懒加载

目的：大量图片的网站，一次性加载所有图片会存在速度变慢，卡顿等问题。...我们可以使用图片懒加载技术，只加载视口内的图片，其余图片用默认小图片（由于所有图片都使用这一张小图片，只会发送一次请求，不会增加性能负担。）或者骨架屏代替。...等图片滚动到可视区后，再给图片url赋值。...如果 >=0 说明该元素在视口内，给元素的url赋值代码实现：图片地址" src="小图片地址"/> --> <img src="./images/1pxImg.png" data-url=".

6.5K2 0

原生js实现图片轮播效果

-- 图片部分,style部分设置便于js中改变偏移量，从而实现图片轮播--> 14 15...-- html body部分加载完成，最后调用js,进行操作；否则无法有效操作 --> 40 js"></script...{ 92 background-color: red; 93 } 94 .point span:active{ 95 background-color: gold; 96 } 1.js...// 鼠标离开container区域，自动播放 68 container.onmouseleave = function() { 69 autoPlay(); 70 } 71 72 // 实现点击相应的小按钮图片跳转到相应图片功能...index=i; 80 //无法点击point，使其变色 81 showPoint(); 82 } 83 )(i); 84 } 85 86 // 实现相应图片对应相应小按钮功能

17.1K6 0

JS 实现远程上传图片功能

场景：上传图片到远程服务器时,本地无法拿到服务器图片临时路径。上传文件到远程服务器 js.../jquery.1.9.1.js" type="text/javascript" charset="utf-8"> 图片的类型添加进去--> formData.append('type', 'up'); /** * 通过formData.set(key, val

7.9K2 0

原生JS实现图片懒加载

通过原生JS实现懒加载 <!

5.3K1 0

原生JS实现图片爆炸特效

分享一个由原生JS实现的图片爆炸特效，效果如下：实现的代码如下：原生JS实现图片爆炸特效 var index = 0; var zIndex = 9999999; //本地图片路径...function show(x, y) { var R = x; var T = y; //爆炸前生成下一张图片...zIndex--; index++; //如果三张不同的图片切换完，切换到第一张 if (imgIndex

18.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭