javascript - 粘性 header - 相对于动态 header 长度的正文位置

标签 javascript css sticky

尝试让标题贴在页面顶部 - postion:fixed - 有效

但是在这样做时,正文不能相对于标题放置 - 如果 position:relative Demo 是可能的

我正在努力实现的目标 -

  • 随滚动移动的粘性标题

  • 一个相对于上面header高度的body(高度是动态的)

到目前为止我做了什么:DEMO

我正在尝试寻找一个纯 CSS(甚至可能吗?)解决方案,但一直没有成功 - 感谢您的帮助

最佳答案

尝试将 padding-top: XXX 添加到 body wrapper div,其中 XXX 等于标题高度。为了使用纯 CSS 实现它(具有固定的标题和可滚动的主体),您必须预先知道标题高度。否则它将覆盖 body div 的顶部。

关于javascript - 粘性 header - 相对于动态 header 长度的正文位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11178931/

相关文章:

javascript - 使用 JavaScript Array.sort() 方法进行洗牌是否正确?

javascript - 在我的快速排序中递归

javascript - 上传图片并停留在页面上

javascript - 使用 nodeJS 的跨浏览器 Canvas 未找到该函数的签名

javascript - 比较两个具有相同数据名称的饼图 (Highcharts)

css - 纯 CSS 多堆叠位置置顶?

javascript - 创建带有标题部分的粘性标题

javascript - jQuery Divider 滚动条自动定位

用于移动网站的 jQuery 可滚动 Div

滚动后的Javascript粘性div