个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
我想让我的标题的一部分粘在滚动条上，而顶部部分消失了:
body {
/* Allows to scroll */
width: 15em;
}
header {
width: 100%;
}
header a {
display: block;
background-color: red;
}
#title {
position: sticky;
top: 0;
}<body>
<header>
<h1>
<a href="index.html">
<div id="caption">Some text</div>
<div id="title">Main title</div>
</a>
</h1>
</header>
<p>Distinctio ut totam quos aliquam et voluptas delectus vitae. Aut optio inventore repudiandae nemo consequatur dolores impedit. Rerum fuga repellat illum culpa qui aut est qui. Qui deleniti mollitia incidunt deleniti officiis aliquid ipsam. Sed molestiae porro consequatur blanditiis deserunt temporibus. Natus autem veritatis illo totam cupiditate quidem qui.</p>
<p>Tempore dolor est omnis rem. Reiciendis architecto quisquam dolor. Dolorem minus ea expedita quo sunt. Adipisci totam cum omnis omnis. Voluptas similique amet magnam consequatur consequatur animi et nihil. Sequi tenetur tempora magnam quaerat est voluptatem.</p>
<p>Magni voluptas et cum. Voluptatum omnis libero odit eligendi. Consequuntur provident fuga qui eveniet similique. Non voluptatem et rerum. Iste corrupti perspiciatis atque.</p>
<p>Recusandae in est enim. Occaecati optio consequatur atque perferendis veritatis. Est aut cupiditate ea. Corrupti cumque quia accusamus ut perspiciatis qui ea.</p>
<p>Quisquam rerum voluptas voluptas corrupti quaerat. Tempore totam nemo numquam a modi similique. Veritatis eos nobis laudantium delectus. Laboriosam in incidunt esse quo provident ut necessitatibus consequuntur.</p>
</body>但是如您所见，这并没有按预期工作。我怎样才能做到这一点？
最佳答案
sticky 需要在 h1 元素上并且您考虑使用负的 top 值来实现您想要的但您需要根据标题的高度找到正确的值
body {
/* Allows to scroll */
width: 15em;
}
header {
position: sticky;
top: -40px;
}
header a {
display: block;
background-color: red;
}<body>
<header>
<h1>
<a href="index.html">
<div id="caption">Some text</div>
<div id="title">Main title</div>
</a>
</h1>
</header>
<p>Distinctio ut totam quos aliquam et voluptas delectus vitae. Aut optio inventore repudiandae nemo consequatur dolores impedit. Rerum fuga repellat illum culpa qui aut est qui. Qui deleniti mollitia incidunt deleniti officiis aliquid ipsam. Sed molestiae
porro consequatur blanditiis deserunt temporibus. Natus autem veritatis illo totam cupiditate quidem qui.</p>
<p>Tempore dolor est omnis rem. Reiciendis architecto quisquam dolor. Dolorem minus ea expedita quo sunt. Adipisci totam cum omnis omnis. Voluptas similique amet magnam consequatur consequatur animi et nihil. Sequi tenetur tempora magnam quaerat est voluptatem.</p>
<p>Magni voluptas et cum. Voluptatum omnis libero odit eligendi. Consequuntur provident fuga qui eveniet similique. Non voluptatem et rerum. Iste corrupti perspiciatis atque.</p>
<p>Recusandae in est enim. Occaecati optio consequatur atque perferendis veritatis. Est aut cupiditate ea. Corrupti cumque quia accusamus ut perspiciatis qui ea.</p>
<p>Quisquam rerum voluptas voluptas corrupti quaerat. Tempore totam nemo numquam a modi similique. Veritatis eos nobis laudantium delectus. Laboriosam in incidunt esse quo provident ut necessitatibus consequuntur.</p>
</body>关于html - 使用 "sticky"制作一个可收缩的 header ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57377106/
26
4
0
我有一个父容器。父容器有 2 个带有粘性页眉和页脚的子容器。问题在于，当用户滚动并到达页脚区域时，粘性页眉的位置会发生变化，即它会与其他可滚动内容一起上升。我为演示创建了一个 fiddle 。 htt
我有一个应用文件，其中包含我自己的自定义应用栏和不同的页面组件: const styles = theme => ({ appBar: { width:'100%', },
这是我的 jsFiddle带有完整的代码示例。 我正在尝试实现 sticky footer .如您所见，我的登录表单非常简短。尽管如此，页脚应该一直固定到页面底部。我试过: .footer {
我有一个这样的 div : HTML Title
如何让我的粘性导航菜单在粘到屏幕顶部后专门使用 GetUIKit 框架更改背景颜色(即蓝色到白色)？ 这是我的代码: wo
我被困在这个问题上有一段时间了，我想我会分享这个position: sticky + flexbox gotcha: 我的粘性 div 工作正常，直到我将我的 View 切换到一个 flex 盒容器，
如果你打开这个 Fiddle https://jsfiddle.net/17uwnsq6/4/在 Safari(12.1.2，但应该适用于所有最新版本)中并开始向下滚动白色可滚动区域，起初粘性“标题”
我在我的网页上使用 jquery.sticky.js。 Div 工作正常，即粘性，但我需要在页脚之前停止 div。 我使用下面的代码来粘性 DIV jQuery(文档).ready(function(
使用 position:sticky 将此代码添加到我的粘性元素 var $sticky = $('.grid-container .sticky'), $stickyTo = $('.grid-
我正在努力实现一些我不确定是否可能实现的事情。请注意，我正在寻找纯 CSS 解决方案，我知道我可以用 JS 解决这个问题，但我不想这样做。 考虑以下笔: https://codepen.io/fchr
我向我的网上商店添加了一个粘性 header ，它适用于 FF、Chrome、Edge。 在 Safari(Windows 10)中执行 JavaScript， header 被固定和转换 - 但不可
我遇到过这两个用于 node js 的粘性 session 库 https://github.com/indutny/sticky-session https://github.com/wzrdtal
WordPress - 元素。尝试优化代码时出了点问题，现在我在页面的第一部分上方有一个巨大的空白空间，我正试图摆脱它。我是新手，正在使用 Elementor，所以我只能使用自定义 CSS。问题出现在
我怎样才能让 Foundation 的粘性元素只粘在小断点上？ data-sticky-on="small"适用于小及以上 最佳答案 对于那些有兴趣的人。我在使用 sass 时找到了这个解决方案。 /
我想创建网格布局，我想搁置以坚持 top: 0并填充所有剩余高度，例如100% 的高度，当我向下滚动时，我需要将旁边的高度更改为 100% 减去页脚高度。没有JS可以做到吗？ * { paddin
我正在为一个 friend 制作一个网站，我想将导航栏设为粘性。这是一个例子:http://www.w3schools.com/html/default.asp .我想要一张图片，其中标题在示例中。
我们的页面上有一个粘性侧面板，使用以下非常简单的 CSS 实现: position: fixed; top:62px; bottom:10px; top 和 bottom 属性创建所需的边距。 问题在
我正在使用 几乎 纯 css，(仅在 css 中执行此操作 不是 要求)背景图像和相邻的选择器用于呈现独特的人类可读的页面当用户将鼠标悬停在水平堆叠的图像上时(在页面右侧，每个图像都使用顺序后缀的类名
如果您不知道 position:sticky 是什么，请观看这个 20 秒长的视频:https://www.youtube.com/watch?v=jA67eda5i-A . 这个 CSS 功能在
我已将一个元素设置为粘性，但我没有定义元素应保持粘性的区域。当前区域不是我选择的，而是在我应用 position:sticky 时自动定义的。显然，我想完全控制我的粘性元素用作事件区域的空间，并且我想
我是一名优秀的程序员,十分优秀！