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

【问题标题】：Fixed to window, but contained inside container固定到窗口，但包含在容器内
【发布时间】：2016-03-03 10:12:14
【问题描述】：

我有一些这样的 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 中，这样当用户滚动页面时，封面和覆盖就会留在相同的位置，但随着 mediasection 元素的消失而消失。

有什么办法可以做到吗？

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

谢谢！

【问题讨论】：

听起来你可能在谈论position: fixed;？
@SimonMerrick 这固定了元素的位置，但不包含在 mediasection 元素内，因此即使 mediasection 元素滚动到视野之外，它也会保持可见。
这是您正在寻找的行为吗？ dropbox.com/s/pk7tbf11jx8c7xw/Untitled.png?dl=0
@SimonMerrick 这正是我要找的！有可能吗？
我不确定。目前我正在阅读一些关于视差的信息。 keithclark.co.uk/articles/pure-css-parallax-websites

标签： html css background-attachment

【解决方案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');
    }
}

注意：在背景图片中嵌入内容显然意味着内容不是交互式的，所以这仅对基本的显示元素有好处。

【讨论】：

【解决方案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;
});

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

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

【讨论】：