2

I have some HTML set up like this:

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

The cover element is uses background-attachment: fixed; to create a parallax effect. What I'm trying to achieve is have the overlay element behave the same way, where the text in it is fixed to the viewport, but still contained inside the mediasection div, so that when the user scrolls the page the cover and overlay stay in the same position, but disappear as the mediasection element goes out of view.

Is there any way to achieve this?

tl;dr; Some sort of background-attachment: fixed; to regular elements, not just the background.

Thanks!

4

2 に答える 2

0

私は自分で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;
});

これにより、スクロール中にオーバーレイがオフセットされます。

しかし、私が言ったように、他の答えは大歓迎です。

于 2015-11-30T01:49:54.663 に答える