Question

我有一些HTML设置如下：

<div class="mediasection large">
    <div class="cover" style="background-image: url(/media/images/panorama.jpg);"></div>
    <div class="overlay">Welcome!</div>
</div>

封面元素使用background-attachment: fixed;来创建视差效果。我想要实现的是覆盖元素的行为方式相同，其中的文本固定在视口中，但仍然包含在mediasection div中，这样当用户滚动页面时，封面和覆盖保持在相同的位置，但随着介体元素的消失而消失。

有没有办法实现这个目标？

TL;博士;某种background-attachment: fixed;到常规元素，而不仅仅是背景。

谢谢！

Answer 1

老实说，我认为最简单的方法就是使用photoshop / [您最喜欢的图像编辑软件]将叠加文字放在背景图像上。我做了this jsfiddle，希望能证明你想要的行为。

HTML

<div class="media-screen">
    <h1 class="sr-only">Overlay Text</h1>
    <p class="sr-only">With an interesting paralax effect</p>
</div>

sr-only是一个在maintaining screen reader accessibility

时可视地隐藏元素的类

CSS

.media-screen {
    position: relative;
    height: 250px;
    background-image: url('path/to/your/image.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.sr-only { 
    position: absolute; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    height: 1px; width: 1px; 
    margin: -1px; padding: 0; border: 0; 
}

移动支持

<小时/> 如果您支持多种屏幕尺寸，则可能需要一些不同版本的图像以适应不同的方向。您可以使用媒体查询替换为各种尺寸/方向显示的图像

/*Example media query for view port width*/
@media screen only and (min-width: 1024px){
    .media-screen {
        background-image: url('path/to/your/image-large.png');
    }
}

/* Example media query for view port orientation */
@media screen only and (orientation: portrait){
    .media-screen {
        background-image: url'path/to/your/image-narrow.png');
    }
}

注意：在背景图片中嵌入内容显然意味着内容不是交互式的，所以这对基本的显示元素来说真的没什么用。

Answer 2

我自己找到了一个基于jQuery的解决方案。我还不是依赖JavaScript的粉丝，所以欢迎任何其他答案，但它确实有效。

这是：

var oldScroll = 0;
$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    var scrollOffset = scroll - oldScroll;

    // Overlay positions
    var offset = $(".overlay").offset();
    $(".overlay").offset({top: offset.top + scrollOffset});

    oldScroll = scroll;
});

这会在滚动时偏移叠加层。

但正如我所说，欢迎其他答案。

固定到窗口，但包含在容器内

2 个答案:

HTML

CSS

移动支持