带有滚动背景的粘性标题

Posted 2023-03-12

【中文标题】带有滚动背景的粘性标题

【英文标题】：Sticky header with scrolling background

【发布时间】：2016-08-17 12:52:52

【问题描述】：

我为我的一个客户制作了一个（粘性）标题。 背景是固定的。所以当页面滚动时，背景似乎会滑到元素后面。直到标题粘住为止。

我的客户希望背景仍然滚动通过元素（页面滚动），当标题被粘在顶部时。

header 
    display: block;
    position: relative;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0;

    background-image: url( '../img/background.png' );
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;


header.sticky 
    display: block;
    position: fixed;

有人知道如何做到这一点吗？

伪元素 ::before 和 ::after 已在使用中。

【问题讨论】：

你能链接到网站吗？

【参考方案1】：

在可滚动的容器上设置背景图像。就像文档的正文。位置：相对。

body  background: url(...); position: relative; 

然后设置位置固定的固定元素。

header.stickOnTop  position:fixed; top:0px; 

要使背景通过，请将粘性元素的背景设置为不透明或完全透明。

header.stickyOnTop opacity: 0.5;