Parallax scroll a background image into permanent view

Question

The affect I'm going for is something I can only compare to Google+ top navigation effect and through some parallax into that. That is, when you scroll down, the search bar disappears and your left with a small "toolbar". I found some jQuery to help me out and I will mess with after I figure this out.

What I'm trying to do first, is get a background image to scroll from below the bar (see the jfiddle) and scroll up to the bar where it will eventually stay put. This is what I've got so far:

<section id="account-bar" class="shelf navbar-fixed-top">
    <div class="navbar-header">
        more...
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">Links</a></li>
        </ul>
    </div>
</section>

with the associated css:

section#account-bar {
    background-color:#111;
    color:#ccc;
    font-size:1.1em;
    height:3.6em;
line-height:3.4em;
    text-align:right
}

section#account-bar:after {
    content:'';
    width:267px;
    height:46px;
    background:url('http://lorempixel.com/267/46/') no-repeat 0 0 scroll;
    background-size:267px 46px;
    top:0;
    left:0;
    position:absolute;
}

EDIT: Here's that jsFiddle

I never added in the jQuery because I wanted a scrolling effect which I thought would be better done with positioning. — Jeremy, Dec 07 '13 at 01:21
You're going to have to use some javascript to determine how far the page has scrolled in order to start the new state — Zach Saucier, Dec 07 '13 at 01:27
I get that part, but is it not possible to have the background image of an element scroll while the element is fixed? — Jeremy, Dec 07 '13 at 01:31
Sure you can do that using `background-position` and some js — Zach Saucier, Dec 07 '13 at 01:41
I know it's not what you're looking for (though I'm still not sure what you're looking for, a diagram may be useful), but you inspired me to create a simple recreation of the top bars which can be found [**in this jsFiddle**](http://jsfiddle.net/Zeaklous/Lt32v/) — Zach Saucier, Dec 07 '13 at 02:01
That's more or less what I was trying to achieve through a different method. This works though! If you add it as an answer, I'll select it. — Jeremy, Dec 10 '13 at 19:48

Zach Saucier · Accepted Answer · 2013-12-10T20:13:56.357

Although this is not currently possible in pure CSS, by using window.onscroll, scrollTop, and a couple if statements, you can create a lovely state change effect that is similar to what you're looking for

Looking at the Google Plus page, there was some content above the navigation. As a result, I set up my HTML as follows

<div class='topContent'>Top Content</div>
<nav>
    <div class='googleSlide'></div> <!--The image that slides in from the left-->
    <div class='navContent'>Nav bar content</div> <!-- Everything else in nav -->
</nav>

Here are my important CSS lines to get it functioning

.topContent { height:75px; /* Arbitrary but necessary value */ }
nav {  height:44px;  width:100%; }
nav div { float:left; }
.googleSlide {
    background-image: url(//ssl.gstatic.com/s2/oz/images/sprites/ribbon-nav-1x-69dd561f4c55d6702aadda4e3b4ce787.png);
    background-position:0 -100px;
    height: 44px; /* More arbitrary but necessary values */
    width: 44px;
    margin-left:-55px;
    transition: all 0.200s; /* To smooth the transition to the new state */
}

And finally, we have the javascript that gets it all working

window.onscroll = function() { // Fires whiles the page scrolls
    var navigation = document.getElementsByTagName('nav')[0],
        slide = document.getElementsByClassName('googleSlide')[0];
    // Conditional to check whether scroll is past our marker, second conditional
    // to make sure that it doesn't keep firing when scrolling inside of the range
    if(document.body.scrollTop > 75  && navigation.style.background != 'white') {
        navigation.style.background = 'white';
        navigation.style.border = '1px solid black';
        navigation.style.position = 'fixed';
        slide.style.marginLeft = '0px';
    }
    // Same as above but toggles back to the original state
    if(document.body.scrollTop < 75 && navigation.style.background != 'grey') {
        navigation.style.background = 'grey';
        navigation.style.border = 'none';
        slide.style.marginLeft = '-55px';
        navigation.style.position = 'static';
        navigation.style.top = '0px';
    }
}

Demo

I'm not sure exactly what you mean by scrolling the background, but a similar approach as this one can get you what you want

Parallax scroll a background image into permanent view

1 Answers1