开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jQuery:如何将DIV保持在屏幕顶部并在向上滚动(并到达其原始位置)后恢复其位置

在这个问题中，我们需要了解jQuery库中的一些基本操作，以便在屏幕顶部保持一个DIV，并在向上滚动时恢复其位置。

首先，我们需要了解jQuery库的基本用法。jQuery是一个流行的JavaScript库，可以简化HTML文档遍历、事件处理、动画和AJAX交互。要使用jQuery，您需要在HTML文档中包含jQuery库，然后使用jQuery选择器来选择HTML元素并对其进行操作。

以下是一个简单的示例，说明如何使用jQuery将一个DIV固定在屏幕顶部，并在向上滚动时恢复其位置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>jQuery固定DIV示例</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <style>
        .header {
            background-color: lightblue;
            height: 50px;
            position: fixed;
            top: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="header">这是一个固定在屏幕顶部的DIV</div>
    <div style="height: 2000px;"></div>
   <script>
        $(window).scroll(function() {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > 50) {
                $('.header').css('top', '50px');
            } else {
                $('.header').css('top', '0');
            }
        });
    </script>
</body>
</html>

在这个示例中，我们首先在HTML文档中包含了jQuery库。然后，我们创建了一个具有类名为“header”的DIV元素，并将其样式设置为固定在屏幕顶部。接下来，我们使用jQuery选择器选择该元素，并在滚动事件中检查滚动条的位置。如果滚动条位置大于50像素，则将DIV的位置设置为50像素，否则将其位置设置为0像素。这样，当滚动条向上滚动时，DIV将恢复其原始位置。

请注意，这个示例仅用于演示目的，并且可能需要根据您的具体需求进行调整。如果您需要更多的帮助，请随时提问。

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

有帮助

没帮助

相关·内容

waypoint_使用jQuery Waypoint创建粘性导航标题

第二个是特定于Waypoint的：它是一个字符串，其值是'down'或'up'具体取决于用户到达该Waypoint时以何种方式滚动。...当用户向下滚动时，表达式direction==='down'计算结果为true ，因此我们的导航栏将接收到sticky类，并停留在视口的顶部。...用户再次向上滚动时，该类将从导航栏中删除，并返回其位置。立即尝试。酷吧？...所有这些都是标准的jQuery票价：在nav添加或删除sticky类后，我们便会使用.css()覆盖元素的垂直位置，然后使用.animate()其设置为应有的水平。...在某些时候，您可能已经注意到，单击导航栏中的链接会将部分的顶部置于浏览器视口的顶部。当没有什么东西遮挡屏幕的那部分时，这是违反直觉的。现在我们有了一个导航栏，这变得非常烦人。

3.3K3 0

fullPage.js全屏滚动插件

class="section">第一屏第二屏第三屏幕...，可选 top 或 bottom controlArrowColor (string) 左右滑块的箭头的背景颜色 loopBottom (true/false)滚动到最底部后是否滚回顶部 loopTop...(true/false)滚动到最顶部后是否滚底部 loopHorizontal (true/false)左右滑块是否循环滑动 autoScrolling (true/false) 是否使用插件的滚动方式...continuousVertical (true/false)是否循环滚动，与 loopTop 及 loopBottom 不兼容 5.常用方法 -- -- moveSectionUp() 向上滚动..."section"> 第三屏幕第三屏的第一屏第三屏的第二屏</

15K2 0

《从案例中学习JavaScript》之实现网页版阅读器

Paste_Image.png 当我滚动条往上滚动的时候，屏幕右下角会出现一个向上的箭头： ? Paste_Image.png 而往下滚动的时候，又自动消失。...其实，手机的顶部和底部就是两张图片： ? Paste_Image.png 我们先把顶部图片引入进来，在引入图片之前，先画两个div来盛放图片。...js控制我们通过jQuery的animate方法来实现回到顶部的动画，实现该功能的核心逻辑就是控制滚动条距离顶部的高度，也就是scrollTop，让它变为0就可以了。...实现思路也很简单，就是判断当前滚动条到底是向上滚动呢，还是向下滚动？...然后设置按钮的透明度就行了，这时候，我们需要对滚动条进行监听，如果向上滚动就显示按钮，否则隐藏按钮，实现代码如下： var justScrollTop = 0; //记录上一次滚动条距离顶部的位置 /

1.3K6 0

【CSS3】css开篇基础（4）

class="box1">浮动的盒子标准流的盒子浮动的元素会一行内显示并且元素顶部对齐如果多个盒子都设置了浮动...，直到其达到指定的阈值位置（例如距离顶部10px），然后变为固定定位，保持在指定位置不动，直到离开阈值范围。...如果元素离开视口顶部时没有足够的空间放置它，它将像相对定位一样继续滚动，直到可以固定在指定位置。粘性定位不脱标，原有空间一直不变。...在设计中，粘性定位常用于创建导航栏在用户滚动时保持在屏幕顶部或侧边的效果，或者创建吸顶效果等。...只有设置了定位的元素才能通过 z-index 控制其堆叠顺序，因为只有这些元素才能脱离正常文档流并具有层叠上下文。

621 0

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

三、使用原生的 offsetTop 实现我们知道 offsetTop 是相对定位父级的偏移量，倘若需要滚动吸顶的元素出现定位父级元素，那么 offsetTop 获取的就不是元素距离页面顶部的距离。...描述：当页面往下滚动时，吸顶元素需要等页面滚动停止之后才会出现吸顶效果当页面往上滚动时，滚动到吸顶元素恢复文档流位置时吸顶元素不恢复原样，而等页面停止滚动之后才会恢复原样原因：在 ios 系统上不能实时监听...scroll 滚动监听事件，在滚动停止时才触发其相关的事件。...因此我们优化的方向就是从减少读取元素属性次数下手，查看代码发现一触发屏幕滚动事件就会调用相关方法读取元素的偏移量。...第一种方案这个方案很常见，不过其带来的副作用也很明显，就是在吸顶效果会有些延迟，如果产品可以接受那就不失为一种好方法。

2.1K3 0

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

offsetTop 用于获得当前元素到定位父级（ element.offsetParent ）顶部的距离（偏移值）。...三、使用原生的 offsetTop 实现我们知道 offsetTop 是相对定位父级的偏移量，倘若需要滚动吸顶的元素出现定位父级元素，那么 offsetTop 获取的就不是元素距离页面顶部的距离。...则它的偏移量属性都为 0；每次访问偏移量属性都需要重新计算（保存变量）；在使用的时候可能出现 DOM 没有初始化，就读取了该属性，这个时候会返回 0；对于这个问题我们需要等到 DOM 元素初始化完成后再执行...描述：当页面往下滚动时，吸顶元素需要等页面滚动停止之后才会出现吸顶效果当页面往上滚动时，滚动到吸顶元素恢复文档流位置时吸顶元素不恢复原样，而等页面停止滚动之后才会恢复原样原因：在 ios 系统上不能实时监听...scroll 滚动监听事件，在滚动停止时才触发其相关的事件。

2.5K6 0

开发 | 餐饮小程序必备！教你轻松做出像「饿了么」一样的点餐界面

如何将分类栏固定在屏幕上呢？使用 sitcky 特性，或许是个方案。今天，知晓程序就来为大家讲解，如何在小程序中使用 sticky 的方法，将页面元素固定在屏幕上。...简单地说，sticky 就是标题栏的「粘粘」效果，向下滑动时跟着列表走、向上滑动到顶部时将会固定在顶部。 ?...顶部的蓝色条幅，就是 sticky 后的效果如果不考虑不同浏览器兼容性，CSS 3 就有一个 position: sticky 属性，就能实现这种效果。 ?...首先，我们需要获取每个 scroll-into-view 的 scrollTop，并且监听 scroll 的滚动，并改变 scroll-into-view 的值。...但如果滑动右侧的滚动条的话，左侧的数据如何跟着变化呢？假如不是小程序的话，应该很多人都知道怎么做——无非就是监听滚动条，判断滚动条的位置，然后根据区域去改变左侧的选择。

9584 0

H5C3第四节

align-items(重点) align-items用于调整侧轴的对其方式，可选的值有： flex-start：元素在侧轴的起始位置对其。 flex-end：元素在侧轴的结束位置对其。...("mousewheel", function( e ) { // e.wheelDelta 鼠标滚动的量, 大于0向上滚, 小于0向下滚 if (e.wheelDelta > 0) {...设置动画的方式，一般不修改, 默认是easeInOutCubic, 如果想要修改此参数，需要引入jquery.easing.js css3 是否使用css3 transform来实现滚动效果，默认true...loopTop 滚动到顶部后是否连续滚动到底部，默认false loopBottom 滚动到底部后是否连续滚动到顶部，默认false continuousVertical 是否循环滚动，默认为false...section,当滚动结束后，会触发一次这个回调函数，anchorLink是锚链接的名称，index从1开始计算 onLeave(index,nextIndex,diretion) 当我们离开一个section

5.3K3 0

造一个 react-infinite-scroller 轮子

offset 公式无限滚动的原理很简单：只要很长元素总高度 - 窗口距离顶部高度 - 窗口高度 < 阈值就加载更多，前面那一堆下称为 offset，表示还剩多少 px 到达底部。...，滚动条的位置不应该还停留在 scrollY = 0 的位置，不然会一直加载更多，比如此时滚动到了顶部： 3 <- 到顶部了，开始加载 2 1 0 加载更多后 6 <- 不应该停留在这个位置，因为会再次触发无限滚动...，用户体验不友好 5 4 3 <- 应该停留在原始的位置，用户再向上滚动才再次加载更多 2 1 0 为了达到这个效果，我们要记录上一次的 scrollTop 和 scrollHeight，然后在组件更新的时候更新...this.pageLoaded += 1) this.loadingMore = true } } } ... } 然后在 componentDidUpdate 里计算并更新滚动条的位置...) 其中 calculateTopPosition 为递归地计算元素顶部到浏览器窗口顶部的距离 window 向上滚动：window.pageYOffset || doc.scrollTop 其中 doc

2.6K3 0

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

，它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持，并且在滚动的过程中，还可以缓冲滚动使得滚动更加的平滑，还可以自动调整滚动条的位置和定义滚动到的位置等...并添加一些测试数据：测试数据.......还有很多很多这样当然不算完，自定义滚动条的样式，必须要出现滚动条才可以，所以我们还要对这个块加上一些 CSS...mCSB_buttons.png：这个 png 图片文件，包含了向上向下向左向右滚动的按钮。可以使用 CSS sprites 技术，来使用这个图片中的相应按钮。...:function(){} }：当滚动到顶部的时候调用这个自定义回调函数 Demo 同上 callbacks:{ onTotalScrollOffset:Integer }：设置到达顶部或者底部的偏移量...这样，这个 div 就扩充到了整个浏览器界面，这样就可以被当做是一个网页的 body。然后加上 overflow：auto 让其超出自动出现滚动条。这样就可以模拟出修改了浏览器滚动条的效果。

14.1K3 0

Material Design —悬浮响应式按钮（Buttons: Floating Action Button）

跨屏幕横跨多个横向屏幕（例如顶部标签屏幕）的悬浮响应式按钮应该短暂消失，然后如果其动作改变就重新出现（此部分动图见原网站）。...如果按钮在各个屏幕上的动作保持不变（如有必要，则转换为新位置），该按钮应保持在屏幕上。列表悬浮响应式按钮下面的列表应该在它们下面有足够的空间，以便它们的内容不被按钮挡住。...滚动就消失的工具栏适用于： ·最开始进入时需要完整工具栏的屏幕 ·长列表顶部或底部需要完整工具栏的屏当用户通过滚动表示他们有兴趣查看主要内容时，节省了屏幕空间。...菜单被唤起后，该按钮应保持在屏幕上。在同一地点点击应激活最常用的操作或关闭打开的菜单。 ? 悬浮响应式按钮可以转换为包含所有动作的单张材料。 ?...从最初的屏幕应该最多只有两次点击就能到达预期的目的地。 ? 将溢出操作置于工具栏中的溢出菜单中，而不是悬浮响应式按钮中。 ?

5.8K9 0

商品添加到购物车动画getBoundingClientRect获取元素位置

点击右侧导航栏 toHash(item, index) { this.selector = index; window.location.hash = item; // 导航栏向上滚动相应距离...动画实现思路：用户点击添加时将一个小球的位置设置为被点击元素的位置，且获取目的地位置（购物车位置），当小球抛出时使其运动方式按照贝塞尔曲线过渡。...event.clientX, endTop = window.innerHeight - 30, // 小球降落终点 endLeft = 20; // // 小球到达起点并去掉小球的...'px' }); var inner = outer.find(".point-inner"); setTimeout(function() { // 将jquery...//这里的延迟值和小球的运动时间相关 }, 1); } 注意点：嵌套的setTimeout中的时间之所以设置为1s，是因为css中规定的小球运动时间为1s，所以在小球1s运动完以后会令它恢复到原来的位置

1.6K2 0

实战 HTML & CSS：如何快速搭建一个响应式博客首页

，以便在页面滚动时保持在原位置 */ top: 0; /* 导航栏距离页面顶部的距离为0像素 */ left: 0; /* 导航栏距离页面左边的距离为0像素 */...、位置固定等等。...但也是有一定套路的，我最常用的就是通过临时添加不同的背景颜色去调试嵌套盒模型，这样我们可以很方便看到各种布局的效果，调试完成后，再恢复到预期的背景色即可。...完善样式参考预期的效果，关于核心内容目前还缺少的样式如下：右侧广告栏，固定展示位置，不管文章列表如何滚动，始终固定显示在页面上；右侧广告栏的内容居中展示；各种边框阴影效果等； .content...，以便在页面滚动时保持在原位置 */ top: 0; /* 导航栏距离页面顶部的距离为0像素 */ left: 0; /* 导航栏距离页面左边的距离为0像素 */

931 0

如何使用 CSS 设置和自定义水平和垂直滚动条

滚动条是图形用户界面（UI）中必不可少的组件。滚动条允许用户查看超出其容器宽度或高度的内容。滚动条还使用户能够查看超出屏幕宽度或高度的内容。默认情况下，浏览器会为body内容的溢出包含一个滚动条。...CSS代码片段描述了如何将初始导航栏样式设置为侧边栏并调整body的底部边距。...下面的截图显示了侧边栏与正常内容流分开：固定溢出的侧边栏上面的侧边栏具有固定位置。页面的正文继续滚动，但侧边栏保持在用户的视图中。...">6 7 页面在屏幕左下角有一个默认的水平滚动条，但您不希望网站的用户使用它。...应用上述样式后，最终的flexbox容器滚动条应如下所示。

1.6K0 0

Material Design — App bars: bottomApp bars: bottom

·灵活 Bottom app bars 的布局和操作会因为屏幕的需求而改变。 ·人体工学 Bottom app bars 很容易从移动设备上的手持位置到达。...滚动滚动时， bottom app bar 可以出现或消失：向下滚动隐藏 bottom app bar，如果有FAB，则它会脱离 bar 并保留在屏幕上。...向上滚动显示 bottom app bar，如果有FAB，则重新附着 FAB。 Bottom app bar 可以改变其边缘的形状，例如凹口以容纳FAB。...当 bar 脱离FAB时，会恢复到默认的形状。在返回到屏幕并重新附着 FAB 后，bar 重新获得了缺口形状。 ? ---- 海拔 Bottom app bar 的海拔高度为8dp。...抽屉在底部应用程序栏前打开，并显示顶部应用程序栏以在达到完整高度时关闭抽屉。 Bottom navigation drawer 从 bottom app bar 打开。

2.4K8 0

3分钟搞定图片懒加载

懒加载实现原理由于浏览器会自动对页面中的img标签的src属性发送请求并下载图片。...随着滚动条的向下滚动，bound.top会越来越小，也就是图片到可视区域顶部的距离越来越小，当bound.top = 当前页面高度 var seeHeight = document.documentElement.clientHeight; // 可视页面高度...class="box"> <script

2.4K2 0

Scroll，你玩明白了嘛？

也就是说，在 JS 中指定 behavior: auto，想要恢复立即滚动到目标位置的效果，将不会生效。...（向上移动）。...使用 {block: "nearest"}：如果您当前位于其祖先的下方，则元素在其祖先的顶部对齐。如果您当前位于其祖先之上，则元素在其祖先的底部对齐。如果它已经在视图中，保持原样。...，并恢复自动翻页的功能。...1、定义一个长列表，并通过 useRef 记录：滚动容器的 ref 脚本滚动的判断变量 isScriptScroll 当前的滚动位置 scrollTop 2、接着，为滚动容器绑定一个 onScroll

3.1K2 2

CSS粘性定位 - 它的真正工作原理！

使用 position: sticky 使用 position: sticky 时，每个人都很快明白，当视口到达定义的位置时，元素会粘在那里。...当它正常工作时，元素会"粘"在一定位置，但在滚动的其他部分，它又会停止"粘"住。作为一个每天都在使用CSS的人，作者无法接受自己不能深入理解这个问题的根本原因，所以决定深入研究sticky定位。...让我来解释一下： Relative 定位（或Static定位）- 粘性定位元素类似于相对定位和静态定位，因为它保持DOM中的自然间隙（保持在流中）。...Absolute 定位 - 在粘附区域的末尾，元素停止并堆叠在另一个元素的顶部，就像绝对定位元素在 position: relative 容器内的行为一样。贴在底部？...这意味着可以定义页脚具有粘性位置，并且在向下滚动时始终会出现粘在底部。当我们到达粘性容器的末尾时，元素将停留在其自然位置。最好将其用于自然位置为粘性容器底部的元素。

2792 0

Linux 命令（89）—— less 命令

警告：使用该选项后不能保证终端能够正常的显示文件内容，因为终端依赖控制字符来格式化文件内容 -R, --RAW-CONTROL-CHARS 与 -r 类似，但只有 ANSI颜色转义序列以原始形式输出。...此选项使文件结束后的行显示为空行 -#, --shift 指定要在 RIGHTARROW 和 LEFTARROW 命令中水平滚动的默认位置数。如果指定的数字为零，则将默认位置数设置为屏幕宽度的一半。...如果将数字指定为分数，则在调整终端窗口的大小时将重新计算滚动条位置的实际数量，从而使实际滚动条保持在屏幕宽度的指定分数 --follow-name 通常，如果在执行 F 命令时重命名输入文件，less...键入前可先输入数值 N，对当前与后续的 LEFTARROW 命令均有效，生效多次 r, ^R, ^L 刷新屏幕 R 刷新屏幕，放弃缓存内容。在文件被修改时有用 F 向前滚动，即使到达了文章尾部。...后面跟着一个命令行选项字母，这将把选项重置为其默认设置的“反面”，并打印一条描述新设置的消息。这不适用于数值或字符串值选项 --! 类似于命令 -!

4.4K3 0

DOM 和 BOM 中的各种宽高属性

不包括开发者工具、顶部栏、侧边栏、滚动条、边框等不由 HTML 控制的部分 window.outerHeight/window.outerWidth：返回表示窗口的外部高度/宽度的数字。...包括开发者工具、顶部栏、侧边栏、滚动条、边框等不由 HTML 控制的部分 image.png 1.2 与屏幕相关 window.screen.width/window.screen.height：返回表示屏幕的宽度...注意：IE 和 Opera 下表示的是窗口文档区到屏幕的距离，这意味着窗口最大化时，screenTop 返回的是窗口顶部栏的高度而不是 0。...image.png 例如，上图中的红框是固定的屏幕可视区，而网页视为可以上下拖动的文档，当滚动条下拉的时候，实际上是文档向上拖动，而这个拖动的距离就是 element.scrollTop 2.4 返回对象系列...scrollLeft()/scrollTop()：水平方向上或者垂直方向上，滑块相对于整个滚动条的位置。对于某个元素，滑块处于初始位置或者无滚动条时，该方法返回 0。

1.9K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭