Javascript CSS只在其他div处停止的滚动div？_Javascript_Html_Css_Parallax

Javascript CSS只在其他div处停止的滚动div？

javascript html css

Javascript CSS只在其他div处停止的滚动div？,javascript,html,css,parallax,Javascript,Html,Css,Parallax,多亏了和的javascript贡献，我有了代码，允许一个div滚动到另一个div的末尾，如果用户向后滚动，停止并恢复滚动然而，由于我有许多其他div设置为“fixed”或“relative”，因此我希望在不使用javascript的情况下（或者至少在不使用当前javascript的情况下）可以实现相同的滚动/停止功能更新：我终于能够在删除“相对”定位元素的同时更接近我想要的输出看来我现在还不能用javascript了 Javascript: $(document).ready(funct

多亏了和的javascript贡献，我有了代码，允许一个div滚动到另一个div的末尾，如果用户向后滚动，停止并恢复滚动

然而，由于我有许多其他div设置为“fixed”或“relative”，因此我希望在不使用javascript的情况下（或者至少在不使用当前javascript的情况下）可以实现相同的滚动/停止功能

更新： 我终于能够在删除“相对”定位元素的同时更接近我想要的输出

看来我现在还不能用javascript了

Javascript:

$(document).ready(function () {
    var s = $("#sticker");
    var x = $("#stickShell");

    var pos = s.position();
    var pox = x.position();

    $(window).scroll(function () {
        var windowpos = $(window).scrollTop();
        s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
        if (windowpos >= pos.top) {
            s.addClass("scroll");
        } else {
            s.removeClass("scroll");
        }
        if (windowpos >= pox.top - 95) {
            s.removeClass("scroll");
            s.addClass("stick");
            s.css({
                'top': pox.top - 95
            });
        } else {
            s.removeClass("stick");
            s.css({
                'top': '0px'
            });
        }
    });
});

我不认为没有JS就可以做到这一点。最接近的可能是使用

position:sticky

，但它的浏览器支持非常有限。感谢您的洞察力，Shikkediel。也许，如果我提供一个更完整但不起作用的示例来说明我所追求的，它会有所帮助：在这种情况下，我希望滚动条div从页面底部的固定位置开始。然后，一旦用户滚动到某个级别，scroller将只滚动到某个特定点，如果用户再次滚动到某个固定点，则停止并恢复滚动。至少重写一点并从

中删除位置：relative
。\example

。谢谢你的时间和关注，混蛋！一切看起来都是可行的……理想情况下，只有滚动条才会出现在页面加载时框架正下方的固定位置。然后，滚动效果将（a）在#scroller进入查看窗口时开始，（b）在现在的位置结束滚动。无论如何，我想这会让我更亲近！

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <div id="mainContent">
            <h1>Intro</h1>

        <p>Here's some content. Below, there's a div with an ID of &quot;sticker&quot;. This div starts fixed and will stick there until the viewport reaches its parent div (I've added ugly red borders to show where everything starts and ends).</p>
        <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
        <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
    </div>
    <div id="scrollShell">
        <p>The scolling div should load as fixed just below this text and begin scrolling down.</p>
        <div id="container">
            <div id="sticker">...start scrolling to watch me stick</div>
        </div>
    </div>
    <div id="extraContent">
            <h1>More Content</h1>

        <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
    </div>
    <div id="stickShell">
        <p>The scolling div should stick just below this text.</p>
    </div>
    <div id="moreContent">
            <h1>Even More Content</h1>

        <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
        <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
        <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
        <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
        <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
        <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
    </div>
</body>

#mainContent {
    width:560px;
    padding:20px;
    border: 5px solid red;
}
#extraContent {
    width:560px;
    padding:20px;
    border: 5px solid red;
}
#scrollShell {
    width:560px;
    height:200px;
    padding:20px;
    border: 5px solid red;
}
#stickShell {
    width:560px;
    height:200px;
    padding:20px;
    border: 5px solid red;
}
#moreContent {
    width:560px;
    padding:20px;
    border: 5px solid red;
}
#container {
    width:230px;
    margin-top:-160px;
    margin-left: 20px;
    border: 5px solid red;
}
#sticker {
    padding:20px;
    margin:160px 0px 180px 0px;
    background:#AAA;
    width:190px;
    border: 5px solid red;
}
.scroll {
    position:fixed;
}
.stick {
    position:absolute;
}