Question

要显示我想要做的事，这是一个网址。 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>

Answer 1

我是八达通的主要开发者。这是使头部效果起作用的最小代码量（它使用固定位置）。

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/

希望有所帮助！

Answer 2

position: fixed;根据可视屏幕坐标定位元素，因此当您滚动时，位置将更新以反映“新”顶部/左侧边界。 position: absolute;更像您所描述的内容，它会将元素保持在同一位置，无论其周围的内容或浏览器的滚动位置如何。但是，这会将元素从页面的“流”中取出，而其他元素的行为就像它不在那里（并且可能会重叠）。在这种情况下，只需float左侧标题即可获得更多运气：float: left;。

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

让html元素保持在相同位置而不使用position：fixed

2 个答案:

HTML

CSS