视差将背景图像滚动到永久视图答案

【问题标题】：Parallax scroll a background image into permanent view视差将背景图像滚动到永久视图
【发布时间】：2013-12-11 04:13:56
【问题描述】：

我想要的效果是我只能与 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

【问题讨论】：

你提到了一个 jsFiddle 但我没看到？
你是对的！感谢您了解这一点。
你的 jQuery 尝试在什么地方吗？
我从来没有在 jQuery 中添加过，因为我想要一个滚动效果，我认为定位效果会更好。
您将不得不使用一些 javascript 来确定页面滚动了多远才能开始新状态

标签： css twitter-bootstrap scroll parallax css-content

【解决方案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

我不确定滚动背景到底是什么意思，但与此类似的方法可以得到你想要的

【讨论】：