css - 视差将背景图像滚动到永久 View 中

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

编辑:这是jsFiddle

Answer 1

虽然目前这在纯 CSS 中是不可能的，但是通过使用 window.onscroll、scrollTop 和一些 if 语句，您可以创建一个可爱的状态变化效果，类似于您正在寻找的效果

看Google+页面，导航上面有一些内容。结果，我将我的 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

我不确定滚动背景到底是什么意思，但是与此类似的方法可以为您提供所需的内容