Javascript 使html元素保持在相同的位置而不使用position:fixed_Javascript_Jquery_Css

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

javascript jquery css

Javascript 使html元素保持在相同的位置而不使用position:fixed,javascript,jquery,css,Javascript,Jquery,Css,为了显示我想做什么，这里有一个url 我想要的东西，当我向下滚动的高度，青色div消失像上面的网站目前，我的代码中有滚动功能，但是，我无法看到#main div下面的HTML的其余部分。我不知道这是否与我的新幻灯片div（固定位置）有关。我想既然#slideshow div的高度降低到了0，我就可以看到#主div下面的HTML了，但我在下面看到的都是白色的 var header = $('#slideshow'), headerH = header.height(); $(window).

为了显示我想做什么，这里有一个url

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

目前，我的代码中有滚动功能，但是，我无法看到#main div下面的HTML的其余部分。我不知道这是否与我的新幻灯片div（固定位置）有关。我想既然#slideshow div的

高度降低到了0
，我就可以看到#主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>

var header=$（“#幻灯片放映”），
headerH=收割台高度（）；
$（窗口）。滚动（函数（）{
如果（页眉高度（）>=0）{
header.css({
高度：-（$（this）.scrollTop（）-headerH），位置：“绝对”
});
}
else if（页眉高度（）<0）{
header.css（'height'，0）；
css（'position'，'absolute'）；
}
});
种马步幅
















a；lsdfja；lskdjf；laskdjf；aslkdjf；alsdjkfa；sldfkja；sldkfja；sldkfja
a；lsdfja；lskdjf；laskdjf；aslkdjf；alsdjkfa；sldfkja；sldkfja；sldkfja

位置：固定基于可视屏幕坐标定位元素，因此当您滚动时，位置将更新以反映“新”的上/左边界<代码>位置：绝对
更像您描述的内容，它将使元素保持在相同的位置，而不管元素周围的内容或浏览器的滚动位置。但是，这将使该元素脱离页面的“流”，其他元素将表现为它不在那里（并且可能重叠）。在这种情况下，只要float
ing你的头向左：float:left
如果这样做，您可能需要通过添加css样式来清除main
div中的浮动：clear:both。这将把main
div推到上面任何浮动内容的下方。
我是八达通的首席开发人员。下面是使类似头部效果工作的最低代码量（它确实使用固定位置）
HTML
我还集成了一个JSFIDLE来演示它，以及该站点所做的一些视差：
希望有帮助 你的密码在哪，伙计？！给我们你的密码！我可能在Jquery、css和html之间有大约500行代码，所以一开始我不知道该发布什么。我认为解决方案更具概念性，所以我没有发布任何东西。基本上，我想知道的是我在上面发布的url，有人会怎么做。我只是想得到一个大概的解释。因为我做的是，我使标题和图像都固定了，并且当用户向下滚动时，我使图像高度缩小了，因为用户认为，在图像位置固定后，任何附加的html都会显示为0，但它的高度不起作用。然后……你试过查看他们的代码吗？我的思路是正确的，但我忘记了任何html我放在固定标题后面的元素会在后面，所以我不得不做一个空的占位符，它有标题的高度，但是谢谢你的回答，你的网站看起来很棒谢谢你。很高兴我能帮忙！
<div id="hero">
    <h2>I am the hero</h2>
</div>
<div id="main-content">
    <h3>I am the main content</h3>
</div>

* {
    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;
}