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将恢复其原始位置。
请注意，这个示例仅用于演示目的，并且可能需要根据您的具体需求进行调整。如果您需要更多的帮助，请随时提问。
相关·内容
2回答
当我向下滚动页面时，我想要一个div元素移动。我该怎么做呢？例如，当我向下滚动并保持其位置时，我希望div元素向下跟随我。
浏览 15提问于2015-01-17得票数 0
回答已采纳
三个Div，顶部的广告分区，下方的标题分区，以及最下面的内容分区。在pg加载时，我打算让广告div显示，但滚动时，我打算将标题div保持在固定位置，top:0px，即位于页面顶部的内容上方。请注意使用CSS中固定的位置，但是他们使用的方式与这个属性相矛盾，因为我需要标题div进一步向上移动，直到页面顶部在滚动页上，并保持位置固定
浏览 3提问于2014-08-22得票数 1
回答已采纳
1回答
我的网页右端有一个div (RightSide)，位于另一个div (TopBanner)下面。即使当用户向下滚动时，TopBanner div仍然保持其在屏幕顶部的准确位置。这正是我想要的。但我也希望RightSide div (在TopBanner下面)即使在用户向下滚动时也能保持在原来的位置。
我已经做到了大约80%，但它的表现很奇怪。当您开始向下滚动时，R
浏览 5提问于2014-01-09得票数 0
回答已采纳
在互联网浏览器上，我希望有一个div (通常是菜单或信息栏)，它在页面滚动过程中到达屏幕顶部时会停止移动。请注意，我不希望这个'div‘总是停留在一个位置:它是一个正常的'div’，它会跟随页面滚动，除非到达屏幕顶部。我不确定这是否可以只与css，如果不能，也许你可以帮助我与jquery…
浏览 0提问于2011-11-09得票数 0
回答已采纳
我想要一个div元素来做类似于gmail的事情。
如何用简单(易懂)的jQuery代码实现这一点？(与所有浏览器兼容)
<div id="header">Menu goes here =)<
浏览 3提问于2011-10-13得票数 5
回答已采纳
1回答
如何处理jquery和/或CSS？
我有一个固定的对象，假设在原始顶部：'0‘(从文档顶部)和原始高度：’10 0‘’。我希望在向下滚动文档时，对象将其顶部位置更改为向下，并且它会增长其高度。因此，当我们到达文档的底部时，对象停在窗口的底部(和文档的底部)，并以100 we的高度结束。反过来，当我们向上滚动到文档顶部时，它以‘top : 0’和
浏览 1提问于2014-06-27得票数 0
回答已采纳
如何使屏幕上的某个元素与屏幕一起滚动(即，相对于屏幕有一个固定的位置)当我的导航栏滚动经过它时？ 换句话说，我有一个不在屏幕顶部的元素，您需要向下滚动到它的位置，然后它才能与屏幕一起滚动。然后，当您向上滚动到屏幕顶部时，项目将返回到其原始位置并</e
浏览 9提问于2020-12-11得票数 0
1回答
当我将元素粘贴到页面顶部时，页面中会出现跳转；当我将元素从stick中移除并放置在页面的原始位置时，页面会出现跳转。我如何才能在没有跳跃的情况下顺利地进行过渡。当用户在页面上滚动并到达特定位置时，转换被激活。$dynamic_element.css({position: 'fixed', top: 0, width: '100%'
浏览 0提问于2019-07-29得票数 0
3回答
这就是问题所在:假设我有这样的东西： <div id="top" style="position:fixed"></div></div>
我希望把#放在div下面，放在#top <
浏览 0提问于2011-07-04得票数 4
回答已采纳
2回答
我有一个脚本，它使用jQuery和CSS定位在页面顶部的东西时，它滚动。然而，当你滚动时，它看起来像是在摇晃，而且它已经固定在Google Chrome和Mozilla Firefox浏览器的顶部。如果没有，请将此代码与jQuery库一起复制并粘贴，以了解我的意思：body { margin:0;$('#scroller&#
浏览 1提问于2011-08-08得票数 2
回答已采纳
2回答
基本上我有一个包含两个div的div容器。当向下滚动时，div容器经过窗口时，它附着在屏幕顶部并跟随屏幕。然而，当我继续向下滚动时，容器div中的div与页脚重叠。我似乎想不出如何阻止页脚重叠，所以我希望当div容器的底部到达页脚附近时，它会停止移动，但当向上滚动时，它仍然跟随屏幕。目前，它所做的就是在传递时跟
浏览 2提问于2012-11-09得票数 2
3回答
我是jquery的新手，在改变滚动效果的css样式时遇到了一些问题。我有一个div，在页面加载时，我希望将其固定为top: 75px，但一旦用户开始从顶部滚动75px，我希望将其更改为position: 0px top :0px。现在，我只能让它在任何滚动动作中改变，而不是等到它从顶部开始达到75px。
到目前为止，我的代码是非常基础的，因为我在这一部分上有点卡住了。$("#side_bar").css("position", &
浏览 2提问于2011-08-19得票数 0
回答已采纳
2回答
当浏览器窗口调整大小时，表格也会随之改变大小，表格中的列也会改变其各自的宽度。</div> </tr></body>
这一切都工作的很好，包装和所有。现在，当用户向下滚动页面时，DIV元素及其内容会向上滚动并滚出窗口。我想要做的是在浏览器离开可见区域之前“修复”浏览器顶部的DIV。当用户再次向上</
浏览 0提问于2012-12-03得票数 1
回答已采纳
1回答
悬停动画未完成
、、
<div class="three"></div> </section>$('.full-w').hover(function() {
marginTopHerothis).find('.two').stop().animate({ 'margin-top': oldMargin }, 'fast&
浏览 0提问于2013-05-03得票数 0
回答已采纳
3回答
我正在测试一些Jquery Ajax脚本，其中一个实际上相当不错。我用它唯一的问题是，当它刷新我的div时，它会把你带回div的顶部。对他们来说，能够不间断地阅读是很重要的。load=tester').fadeIn("slow");</script>
<br &#x
浏览 0提问于2011-09-07得票数 3
回答已采纳
我有几个锚点，它们链接到页面中的特定部分(使用标签)，还有一些锚点可以滚动到文档窗口的顶部或底部。$("html, body").animate({ scrollTop: $(document).height() }, 2000);
但是，一旦动画和滚动到达其目标位置并完成，文档滚动和滚动条似乎就会禁用几秒钟例如，如果单击“转到页面底部”链接，“我的文档”窗口将正确滚动到页面底部。只要我试着<em
浏览 1提问于2012-04-05得票数 12
1回答
我希望实现屏幕截图中显示的效果(即滚动时，滚动视图中的第一个可见<div>在显示下一个滚动视图之前进行挤压，并在下一个视图到达其位置后消失)，最好没有JavaScript，但我在互联网上没有找到关于这方面的许多有用信息
浏览 3提问于2022-07-19得票数 -1
我有3个div，父div(红色)，2个子div在顶部(蓝色)，另一个在底部(绿色)。以下是我想要达到的目标：
当顶部div(蓝色)通过单击“展开蓝色Div”按钮调整/增加其大小时，底部div(绿色)将缩小/缩小其大小，但保持其位置，这意味着，即使它改变了其高度，它仍应保持在x轴上。总之，不管底部div(绿色)
浏览 2提问于2016-08-12得票数 1
回答已采纳
2回答
刚学会了柔韧盒，并决定用它做一个肚脐。最后做了个漂亮的肚脐。我用jQuery修正了这个问题，但是肚脐滚动并不顺利，在我上下滚动的时候闪烁着。我现在可以滚动向上和向下顺利与肚脐在位置固定模式。当我到达页面的最小宽度时，
浏览 2提问于2016-11-16得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
