0

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

4

1 回答 1

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

演示

我不确定滚动背景的确切含义，但是与此类似的方法可以为您提供所需的

于 2013-12-10T20:08:48.003 回答