Change CSS header when scrolling down

Question

I am trying to achieve the same title that disappears in / fade out, like this site: http://www.shopstyle.com/

If you go to the site and scroll down, you will see that the initial title is transparent, but when you scroll down a certain number of pixels, CSS switches to a solid background. Is this done through jquery / js or maybe through CSS3?

thanks

Answer 1

This is not possible with CSS, because CSS cannot select the top of the scroll. This is very easy to do using javascript.

$(window).on("scroll", function () {
    if ($(this).scrollTop() > 100) {
        $("#header").addClass("not-transparent");
    }
    else {
        $("#header").removeClass("not-transparent");
    }
});

Answer 2

jQuery Waypoints, header / , Waypoints ( ) . / CSS3, jQuery UI.

, , , , JS, :

$('.header-wrap').waypoint('sticky', {
    stuckClass: 'stuck',
    offset: -1
});

offset: -1 , , .header-wrap -1px ( , , -200, 200 ).

stuck , , ..

Answer 3

The combination of javascript and CSS3 should do the trick. In essence, you need to listen to the $ (window) .scroll event and add a class (for example, fill) with some y-offset in your header:

.header { transition: all 1s; }
.header.fill { background-color:rgba(0,0,0,.25); }