3

为了展示我想要做什么，这里是一个 url。http://octopuscreative.com。

我想要一些东西，当我向下滚动高度时，青色 div 会像上面的网站一样消失。

我目前在我的代码中可以滚动，但是，我看不到#main div下方的 HTML 的其余部分。我不知道这是否与我的新#slideshow div（位置固定）有关。我想既然#slideshow div已height缩减为0，我将能够看到#main div下面的 HTML ，但我在下面看到的都是白色的。

var header = $('#slideshow'),
headerH = header.height();

$(window).scroll(function() {
if (header.height() >= 0) {
    header.css({
        height: -($(this).scrollTop() - headerH), position: 'absolute'
    });
}
else if (header.height() < 0 ) {
header.css('height', 0);
header.css('position', 'absolute');
}
});


    </script>
</head>
<body>

    <div id="top">

        <div id="stallion">
            <img id="stallionpic" src="stallion1.png" />
            <h1 class="h1">Stallion Stride</h1>
            <div id="navigation">
            <ul>
                <li><a href="google.com" id="first">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Register</a></li>
                <li><a href="" id="last">Contact Us</a></li>
            </ul>
            </div>
        </div>
    </div>
    <div id="main">
        <div id="slideshow">
            <div id="leftbutton"></div>
            <div id="rightbutton"></div>
            <div id="slideshownav">
                <ul>
                    <li><a class="active"></a></li>
                    <li><a></a></li>
                    <li><a></a></li>
                    <li><a></a></li>
                </ul>
            </div>
        <div id="slideshow_inner">

            <li id="pic1"><a><img src="pic2.jpg" /></a></li>
            <li id="pic2"><a><img src="pic1.jpg" /></a></li>
            <li id="pic3"><a><img src="pic3.jpg" /></a></li>
            <li id="pic4"><a><img src="pic4.jpg" /></a></li>

        </div>
        <p>a;lsdfja;lskdjf;laskdjf;aslkdjf;alsdjkfa;sldfkja;sldkfja;sldkfja;</p>
        </div>

        <div id="mainContent">
            <p>a;lsdfja;lskdjf;laskdjf;aslkdjf;alsdjkfa;sldfkja;sldkfja;sldkfja;</p>
        </div>
    </div>
    <div id="footer">

    </div>
</body>

4

2 回答 2

3

我是 Octopus 的首席开发人员。这是使标题效果起作用的最少代码量（它确实使用固定位置）。

HTML

<div id="hero">
    <h2>I am the hero</h2>
</div>
<div id="main-content">
    <h3>I am the main content</h3>
</div>

CSS

* {
    margin: 0;
}

div#hero {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #3D6AA2;
    height: 300px;
}

div#main-content {
    height: 1500px;
    background: #fff;
    margin-top: 300px;
    position: relative;
    z-index: 1;
}

我还拼凑了一个演示它的 jsFiddle，以及该网站所做的一些视差工作：http: //jsfiddle.net/paulstraw/FW4FF/

希望有帮助！

于 2013-08-16T19:19:41.023 回答
1

position: fixed;根据可视屏幕坐标定位元素，因此当您滚动时，位置将更新以反映“新”上/左边界。position: absolute;更像您所描述的，它将元素保持在同一个位置，而不管它周围的内容，或浏览器的滚动位置。但是，这会将元素从页面的“流”中取出，其他元素会表现得好像它不存在（并且可能会重叠）。在这种情况下，您可能会更幸运，只需float将标题留在左侧：float: left;.

如果这样做，您可能需要main通过添加 css 样式来清除 div 中的浮动：clear: both;。这会将maindiv 推到上方的任何浮动内容下方。

于 2013-08-11T00:39:51.787 回答