CSS:进入视口时将粘滞定位到底部
CSS（层叠样式表）是一种用于描述网页样式和布局的标记语言。它可以控制网页的外观和排版，使网页更加美观和易于阅读。
粘滞定位（Sticky Positioning）是CSS中的一种定位方式，它可以使元素在滚动过程中保持在特定位置。当元素进入视口（即浏览器可见区域）时，它会固定在页面的底部，直到滚动到指定位置或离开视口。
粘滞定位在网页设计中有很多应用场景，例如在导航栏中使用粘滞定位可以使导航栏始终可见，方便用户导航网页内容。另外，在需要固定某个元素的情况下，粘滞定位也是一个很好的选择。
腾讯云提供了一系列与网页开发相关的产品，其中包括云服务器（CVM）、云存储（COS）、内容分发网络（CDN）等。这些产品可以帮助开发者快速搭建和部署网站，提供稳定的服务器和存储服务，加速网页内容的传输。
以下是腾讯云相关产品的介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
通过使用腾讯云的这些产品，开发者可以轻松实现网页的粘滞定位效果，并提供稳定的基础设施支持。
相关·内容
我正在尝试添加一个粘性元素，只有当它进入视口时才会留在页面的底部。其思想是将元素放在页面中间的某个位置，并且在用户访问页面时不会立即显示。在.sticky上将bottom: 0改为top: calc(100vh - 30px)似乎可以在桌面上很好地工作，但我注意到这不足以在iOS上使用Safari.使用这种“hacked”解决方案，每当用户向上滚动时，底部条的大小会增加，并迫使粘性元素跳转。
浏览 31提问于2019-02-01得票数 9
回答已采纳
2回答
相对位置:粘性
、、
将css属性位置设置为粘滞会导致元素相对定位，直到某个点也被滚动，此时元素就会变得固定。如何实现反向，即元素是固定的，直到某个点成为相对点。要扩展，想象一下我有一个大页脚，500 of的高度，这最初是在视口之外。我想要一个按钮，最初下降到页面底部，但是，如果页脚进入视图，那么按钮应该保持在页脚上方。
浏览 0提问于2018-02-02得票数 16
回答已采纳
1回答
如何在不使用绝对定位的情况下将div (不是视口大小)扩展到视口底部？如果我使用绝对定位将我的" main“div扩展到视口底部，那么在main上方添加的任何元素，比如导航条，都不会被浏览器自动重新定位，因为”主“div不再处于正常流中。而且我真的不想每次在正常流中添加/删除一个动态div (或其他包含的)时
浏览 2提问于2013-09-12得票数 1
回答已采纳
("top",""+ offset +"px"); 我希望能够检测到视口的高度，并让我的动作按钮显示在底部以上的20 my。将CSS设置为底部为20‘t的固定位置不起作用，因为根据视口大小，动作按钮可能会显示在第三列或列外。如果将"floating_nav_container“设置为固定的，并将其设置为中间列的子列，则其行为与在DOM
浏览 7提问于2015-04-07得票数 0
回答已采纳
我正在尝试创建一个简单的幻灯片面板，它从屏幕底部滑入并覆盖视口。然后，我通过AJAX将内容加载到该面板中。我将面板元素设置为height:0，并将其绝对定位在视口的底部，并应用css3变换，将高度设置为视口的高度，从而触发动画。-webkit-transition-
浏览 0提问于2010-12-01得票数 0
回答已采纳
在Safari中打开虚拟键盘时，位置粘滞不起作用 position: sticky; bottom: 0;复制步骤：
预期:即使虚拟键盘是打开的，红色页脚也应该贴在屏幕底部:用户必须向下滚动键盘打开，才能看到红色的页脚。
浏览 0提问于2019-10-03得票数 4
2回答
我试图让一个侧边栏坚持滚动，但它不工作。如何找出错误代码的缺失步骤？侧边栏应该浮动在与view-port相同的位置。下面是我使用的代码：.sidebar-nav { position: sticky;}
padding: 0 .625rem 1.25rem 1.5rem; position: relative;}
.sidebar-na
浏览 0提问于2020-06-24得票数 0
例如，定位到“底部”的CSS背景图像现在(错误地)定位在视口的底部。
有什么方法可以防止或修复这个问题吗？
浏览 1提问于2010-08-25得票数 7
2回答
我有一个按钮，它粘在视口的底部，比它的父对象更宽：这就是我想要的。但是，当视区很短时，button也会覆盖内容，这是我不想要的：我希望当viewport小于button加上我从button中删除bottom:0时看到的内容时，button会粘在内容的底部然而，当然，当视区大于内容时，button不再停留在视区的底部：同样重要的是，按钮是视
浏览 11提问于2021-05-24得票数 1
我正在制作一个粘性的导航栏，它将在启动时放置在视口的底部。我在用vh单位来放置它。现在，如果视口的高度发生更改，导航栏将按预期重新定位。然而，.offset().top将继续使用过时的立场。这会导致脚本在不正确的位置切换为粘滞。
浏览 10提问于2017-02-14得票数 0
我试图创建一个函数，它在窗口的特定位置滚动时，div的不透明度开始增加(不透明度等于1后立即减少)，但我的函数只适用于第一个div。但仅当它们在视口中时才应执行此操作。如何让它在底层div中正常工作？ const elPosition = (window.pageYOffset - window.innerHeight / topMargin);
div.css
浏览 0提问于2020-07-07得票数 0
2回答
我有一个标志，应该定位在一个固定容器的最底部。它的工作位置:绝对；但是，如果我添加溢出-y: auto；到固定容器和添加内容不符合视口高度，我的标志将坚持在视口底部，而不是固定容器的底部，从而重叠的内容。logo-in-the-bottom { bottom: 10px; left: 0;}
，无论内容高度如何，如何将其粘贴
浏览 4提问于2015-05-15得票数 0
回答已采纳
我有一个栏，有一些按钮，它使用绝对和固定的定位“粘”到视窗的底部。我理解这一点(使用bootstrap 4)。我想要发生的是，当用户滚动页面，然后页脚进入视图时，按钮栏将与页脚一起向上移动，这样就不会模糊页脚。当用户向下滚动页面，页脚移出视图时，按钮栏将停留在视口的底部。
我该如何处理这个问题呢？
浏览 11提问于2020-02-20得票数 0
我使用jQuery append函数动态插入标记和CSS，该函数将我的logo绝对定位在客户站点的右下角，而且它在大部分情况下都工作得很好。然而，我需要加强这一定位，以适应两种不同的场景，这让我相当困惑。
如果网站上的元素没有达到窗口的底部，我希望在右下角的标志，这是目前发生的。这太棒了。如果元素确实到达页面底部或更远，强制滚动条，我希望徽标位于最低到达DIV底部的40px以下，仍然位于页面的右下角(几乎就像它是正常文档流的一部分，而不是绝对定位)。这就是我不能理解的。
浏览 2提问于2009-08-07得票数 2
回答已采纳
3回答
如果单击它，则登录信息将显示在屏幕底部。
我用一个相对于页面底部的负固定位置来做这件事。除了iPad和iPhone等移动设备之外，这在所有浏览器中都能正常工作。登录栏出现在屏幕的中间。
浏览 0提问于2010-08-04得票数 1
回答已采纳
position: sticky适用于边栏短于视口高度的简单用例。但是，如果您的侧边栏比视区大，则侧栏需要有一些滚动机制，以便在向下滚动提要时可以看到侧边栏的底部。了解所需行为的最佳方法是测试您的facebook提要并缩小屏幕高度，以便您的视口小于侧栏的高度。我想在这里总结一下：
侧栏的行为与您期望的位置完全相同:粘滞。侧边栏停留在相同的地方，并跟随你滚动和向上滚动。
浏览 5提问于2020-02-13得票数 0
我有一个高度为100%的地图元素，它垂直延伸超过视口高度。有没有一种方法可以缩小地图元素的高度，使其一直延伸到视口的底部，而不是超出它？map元素扩展到height: 100%。我对height: 100%的理解是，它采用其父元素的完整高度。在这种情况下，父元素的全高是视口高度。例如，我们假设视口高度为600像素，而出现在地图元素之前的<div>元素的高度为100像素。
当我将地图的高度
浏览 0提问于2015-05-06得票数 0
当浏览器调整大小时，我试图让图像填满视口并自动调整大小，唯一的问题是，由于某种原因，我无法让图像不扩展到#wrapper元素之外，即使它已将溢出设置为隐藏，我假设这是因为我使用百分比而不是固定的宽度和高度现在，当我将overflow: hidden;放在body元素上时，它可以工作，但是当你在页面上的任何地方选择文本并向下拖动时，它会向下滚动到图像的底部，这是有问题的，因为我有一个绝对定位在屏幕底部的页脚菜单，当它被向下拖动时
浏览 0提问于2011-09-18得票数 6
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
