在网页中，粘性元素是页面的一个元素，它保持在屏幕上的固定位置，使其始终可见。
我找到了几篇文章： https://melanie-richards.com/blog/css-grid-sticky/ https://ishadeed.com/article/position-sticky-css-grid/ 这解决了尝试使用位置时的“问题”：
假设您收到以下 HTML： 假设您获得以下 HTML： <div class="grid"> <div class="sticky blue one" style="height: 50px !important"></div> <div class="red two"></div> <div class="green three"></div> <div class="orange four" style="height: 1500px !important;"></div> </div> ，其中网格提供两列；第一个元素生成两行，最后一个元素生成两列，如下所示： 如何在不更改 HTML 的情况下使蓝色元素具有粘性 (position: sticky)，但只能粘到橙色元素？ 网上有一些资源建议使用align-self，但我还没有找到可行的解决方案。 这是当前状态，蓝色元素滚动到橙色元素上： .grid { display: grid; width: 100%; gap: 1rem; background-color: aliceblue; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: "one two" "one three" "four four"; } .grid>div { height: 500px; width: 100%; } .sticky { position: sticky; top: 5px; } /** * Placement */ .one { grid-area: one; } .two { grid-area: two; } .three { grid-area: three; } .four { grid-area: four; } /** * Colours */ .blue { background-color: blue; } .red { background-color: red; } .orange { background-color: orange; } .green { background-color: green; } <div class="grid"> <div class="sticky blue one" style="height: 50px !important"></div> <div class="red two"></div> <div class="green three"></div> <div class="orange four" style="height: 1500px !important;"></div> </div> 这里有一个 codepen 的链接：https://codepen.io/BernhardWebstudio/pen/mdQZMwW 您考虑过使用 z-index 吗？ .one { grid-area: one; z-index: 1; // Add this } .four { grid-area: four; z-index: 50; // And add this } 这样蓝色网格就会隐藏在橙色元素下面。这不是一个非常漂亮的解决方案，但在不更改 html 的情况下无法真正思考任何事情......
我有一个以径向渐变作为背景的页面。内容比视口长，因此该渐变的中心不在屏幕中心，这也是所需的结果...
它确实从内容顶部到侧边栏留下了空白，而侧边栏在滚动时仍然保持在左侧。 让 sidebar = document.getElementsByClassName("blog-sidebar")[...
我正在尝试在用户滚动时为四个标题设置动画。首先，我创建一个粘性定位的 div，然后用户滚动标题，一次切换一个类 .active，留下最后一个...
如何在 NextJS 中制作像 Facebook 一样的 Sticky Sidebar？
我正在尝试像 Facebook 那样在 NestJS 中制作一个粘性侧边栏，但是当我滚动页面内容时，其中的侧边栏也会滚动，但它不应该滚动。它应该独立工作，只负责...
在下面的演示中，我有一个需要特定滚动行为的表格。挑战在于保持表头粘在顶部，同时允许表体水平滚动...
使用 Styler 的 Pandas Sticky 列标题不起作用（粘性索引行效果很好）
我在 Flask 中使用 pandas 1.5.3。此代码创建一个粘性索引列但不创建粘性列标题： bigdf = pd.DataFrame(np.random.randn(100, 100)) dfhtml = bigdf.style.set_sticky(axis="i...
我有一张超出视口高度的大桌子。该表可水平滚动，因此表底部有水平滚动条。但是滚动条不可见...
为什么 CSS sticky 不起作用（Sveltekit + UnoCSS）？
我有一个带有 UnoCSS 的 Sveltekit 项目设置，使用风预设。下面是代码： 导入“uno.css”； 导入'@un ...</desc> <question vote="0"> <p>我有一个带有 UnoCSS 的 Sveltekit 项目设置，使用 <pre><code>wind</code></pre> 预设。代码一目了然：</p> <pre><code><!-- +layout.svelte --> <script lang="ts"> import 'uno.css'; import '@unocss/reset/tailwind-compat.css'; import '@fontsource/inter/400.css'; import '@fontsource/inter/500.css'; import '@fontsource/inter/600.css'; import '../app.css'; import Header from '$lib/Header.svelte'; </script> <div class="min-h-screen px-6 text-white bg-black md:px-12 lg:px-24 xl:px-48 h-200vh" > <Header /> <slot /> </div> <!-- +page.svelte --> <main class="sticky flex flex-col justify-center h-screen py-20"> <h1 class="text-9xl font-500 ui-head mt-1/17"> I'm a <span class="ui-head">fullstack software engineer</span>, <span class="ui-head">musician</span>, & <span class="ui-head">minecrafter</span>. </h1> <p class="pb-4 mt-auto text-lg font-500 ui-head text-neutral-400"> Keep Scrolling </p> <a href="#software-engineer" class="hidden gap-3 p-4 mt-auto text-black bg-white rounded-full hover:flex group w-fit" > <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-1.8rem h-1.8rem" > <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" /> </svg> </a> </main> <!-- Header.svelte --> <header class="fixed z-50 flex items-center justify-between py-6 w-1467px bg-black bg-opacity-96%"> <a href="/" class="text-1.3rem font-500 ui-head group" >quantasium<span class="absolute hidden text-neutral-300 group-hover:inline" >#0017</span ></a > <svg xmlns="http://www.w3.org/2000/svg" class="w-6.5 h-6.5 text-white cursor-pointer" viewBox="0 0 16 16" ><path fill="currentColor" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" /></svg > </header> </code></pre> <p>包罗万象的 <pre><code><div></div></code></pre> 具有 <pre><code>h-200vh</code></pre> 风格并显示溢出。 <pre><code><main></main></code></pre> 元素是 <pre><code>sticky</code></pre>。但是，<pre><code>sticky</code></pre>好像没有效果，页面正常滚动。我该如何解决这个问题？</p> </question> <answer tick="false" vote="0"> <p><pre><code>position: sticky;</code></pre> 需要 <pre><code>top</code></pre>、<pre><code>bottom</code></pre>、<pre><code>right</code></pre> 或 <pre><code>left</code></pre> 集之一。如果您希望它在向下滚动时粘在顶部，请设置<pre><code>top: 0;</code></pre></p> </answer> </body></html>
我为“联系我们”按钮制作了一个粘性按钮，它在网站上看起来没问题，但在手机上它出现在网站内容后面并且不可点击
使用 tkinter 在 python 中调整窗口大小时，让我的文本和按钮不动
我想知道如何制作它，以便在调整窗口大小时我的文本和按钮不会移动！ 我想不通，这真的很烦人，因为我无法正确放置它们......
我在容器左侧有一个粘性元素（100vh - 一些标题高度）和右侧非粘性元素（正常滚动流）。虽然卡住的元素没有问题。我有一个
我希望左侧的“摘要”部分在向下滚动时粘在顶部。 https://codepen.io/anjanesh/full/gOBprPR ...
我被困在这个问题上了一点，我想我会分享这个位置：sticky + flexbox gotcha： 我的 sticky div 工作正常，直到我将视图切换到 flex box 容器，然后突然...
如何在 flutter 中滚动 SingleChildView 时固定小部件的位置
我有一个有状态的小部件类，其中我有一个 SingleChildScrollView，它采用 Column 和一些小部件，假设 w1、w2、w3、w4 和 w5 都是可滚动的，我想要实现的是当用户
我的粘性包装纸上有两个导航元素。 “家”和“托斯”。它在我的电脑上看起来不错，但是当我在手机上打开它时，它们突然垂直放置了....
我正在尝试制作这个网站，我希望徽标看起来像图片中的样子（徽标在左上角），我之前可以使用它，但是在弄清楚如何获取链接之后？ （列表元素...