Параллакс прокручивает фоновое изображение в постоянный вид

Question

Аффект, который я собираюсь сделать, это то, что я могу сравнить только с навигационным эффектом Google+ и с помощью некоторого параллакса. То есть, когда вы прокручиваете вниз, панель поиска исчезает, а слева - небольшая «панель инструментов». Я нашел немного jQuery, чтобы помочь мне, и я буду возиться после того, как я это выясню.

Что я пытаюсь сделать первым, это получить фоновое изображение, чтобы прокручивать его под панелью (см. Jfiddle) и прокручивать до панели, где она в конечном итоге останется на месте. Это то, что я получил до сих пор:

<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> 

с соответствующим 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: Вот что jsFiddle

Answer 1

Хотя это не возможно в настоящее время в чистом CSS, с помощью window.onscroll, scrollTop, а также пару if заявлений, вы можете создать прекрасный эффект изменения состояния, который похож на то, что вы ищете

На странице Google Plus было некоторое содержание над навигацией. В результате, я создал свой HTML следующим образом

<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> 

Вот мои важные CSS линии, чтобы получить его функционирование

.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 */ 
} 

И, наконец, мы имеем JavaScript, который получает все это работает

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

Я не уверен, что именно вы имеете в виду с прокручивая фон, но подобный подход, как этот, может получить вас, что вы хотите