使html元素保持在同一位置而不使用position:fixed

Having a html element stay in the same position without using position: fixed

本文关键字：position fixed 位置 元素 html      更新时间：2023-09-26

要显示我想做什么，这里有一个url。http://octopuscreative.com。

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

我目前在代码中进行滚动，但是，我看不到#maindiv下面的HTML的其余部分。我不知道这是否与我新的#幻灯片div（固定位置）有关。我想既然#slideshowdiv的height减少为0，我就可以看到#主div

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>

我是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/

希望能有所帮助！

position: fixed;根据可查看的屏幕坐标定位元素，因此当您滚动时，位置将更新以反映"新"的上/左边界。position: absolute;更像您所描述的，它会将元素保持在同一位置，而不管它周围的内容或浏览器的滚动位置如何。然而，这会将元素从页面的"流"中删除，其他元素会表现得好像它不在那里一样（可能会与它重叠）。在这种情况下，你可能会有更多的运气，只要float将你的标题向左：float: left;。

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

相关文章：