如何在一定高度后固定滚动div并在到达其他div后停止？ [英] How to fixed scroll div after certain height and stop after reach other div?

问题描述

我想在固定滚动达到某个div后停止。
我发现其他教程哪里放置父div div div内的子div。
但我不希望那样。

请在下面的代码片段中查看我的解释。
我希望在到达其他div后停止滚动。

任何帮助真的很感谢...
谢谢。

  $（document）.scroll（function（）{//将nav粘贴到页首var y = $（this）.scrollTop（）; var navWrap = $ （'#navWrap'）。offset（）.top; if（y> navWrap）{$（'nav'）.addClass（'sticky'）;} else {$（'nav'）。removeClass（'sticky' ）;}}）;  

body {height：1600px; margin：0;}＃navWrap {height：70px} nav {height：70px;背景：灰色;}。sticky {position：fixed; top：0;} h1 {margin：0;}

< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js>< / script>< p> Zombie ipsum reversus ab病毒地狱， nam rick grimes malum cerebro。 De carne伐木动物群动脉炎。萨摩姆大脑坐在morb，或马尔菲菲？ De apocalypsi gorger omero不死生还者格言mauris。嗨无脑mortuis没有灵魂的creaturas，imo邪恶的跟踪monstra adventus resi dentevil vultus comedat cerebella viventium。 Qui动画尸体，板球棒最大布鲁克terribilem incessu zomby。伏都教sacerdos食肉者，suscitat mortuos comedere carnem病毒。 Zonbi为了解决眼睛疲劳症而去世。内西欧脑筋不死的僵尸。 Sicut malus putrid伏都教恐怖。 Nigh tofth eliv ingdead。< / p>< div id =navWrap> < NAV> < h1>当您向下滚动时，我坚持顶部，当您向上滚动到原始位置时，我坚持不放< / h1> < / nav>< / div>< p> Zombie ipsum reversus ab病毒地狱，nam rick grimes malum cerebro。 De carne伐木动物群动脉炎。萨默斯大脑坐着，morbo vel maleficia？ De apocalypsi gorger omero不死生还者格言mauris。嗨无脑mortuis没有灵魂的creaturas，imo邪恶的跟踪monstra adventus resi dentevil vultus comedat cerebella viventium。 Qui动画尸体，板球棒最大布鲁克terribilem incessu zomby。伏都教sacerdos食肉者，suscitat mortuos comedere carnem病毒。 Zonbi为了解决眼睛疲劳症而去世。内西欧脑筋不死的僵尸。 Sicut malus putrid伏都教恐怖。                     De carne伐木动物群动脉炎。萨摩姆大脑坐在morb，或马尔菲菲？ De apocalypsi gorger omero不死生还者格言mauris。嗨无脑mortuis没有灵魂的creaturas，imo邪恶的跟踪monstra adventus resi dentevil vultus comedat cerebella viventium。 Qui动画尸体，板球棒最大布鲁克terribilem incessu zomby。伏都教sacerdos食肉者，suscitat mortuos comedere carnem病毒。 Zonbi为了解决眼睛疲劳症而去世。内西欧脑筋不死的僵尸。 Sicut malus putrid伏都教恐怖。 < / p>< br>< div id =stopHere>< h3 style =color：red>我希望它停止在这里固定滚动。 < / h3>< / div>< br>< p>僵尸ipsum reversus ab病毒地狱，nam rick grimes malum cerebro。 De carne伐木动物群动脉炎。萨摩姆大脑坐在morb，或马尔菲菲？ De apocalypsi gorger omero不死生还者格言mauris。嗨无脑mortuis没有灵魂的creaturas，imo邪恶的跟踪monstra adventus resi dentevil vultus comedat cerebella viventium。 Qui动画尸体，板球棒最大布鲁克terribilem incessu zomby。伏都教sacerdos食肉者，suscitat mortuos comedere carnem病毒。 Zonbi为了解决眼睛疲劳症而去世。内西欧脑筋不死的僵尸。 Sicut malus putrid伏都教恐怖。                     De carne伐木动物群动脉炎。萨默斯大脑坐着，morbo vel maleficia？ De apocalypsi gorger omero不死生还者格言mauris。嗨无脑mortuis没有灵魂的creaturas，imo邪恶的跟踪monstra adventus resi dentevil vultus comedat cerebella viventium。 Qui动画尸体，板球棒最大布鲁克terribilem incessu zomby。伏都教sacerdos食肉者，suscitat mortuos comedere carnem病毒。 Zonbi为了解决眼睛疲劳症而去世。内西欧脑筋不死的僵尸。 Sicut malus putrid伏都教恐怖。                     De carne伐木动物群动脉炎。萨摩姆大脑坐在morb，或马尔菲菲？ De apocalypsi gorger omero不死生还者格言mauris。嗨无脑mortuis没有灵魂的creaturas，imo邪恶的跟踪monstra adventus resi dentevil vultus comedat cerebella viventium。 Qui动画尸体，板球棒最大布鲁克terribilem incessu zomby。伏都教sacerdos食肉者，suscitat mortuos comedere carnem病毒。 Zonbi为了解决眼睛疲劳症而去世。内西欧脑筋不死的僵尸。 Sicut malus putrid伏都教恐怖。                     De carne伐木动物群动脉炎。萨默斯大脑坐着，morbo vel maleficia？ De apocalypsi gorger omero不死生还者格言mauris。嗨无脑mortuis没有灵魂的creaturas，imo邪恶的跟踪monstra adventus resi dentevil vultus comedat cerebella viventium。 Qui动画尸体，板球棒最大布鲁克terribilem incessu zomby。伏都教sacerdos食肉者，suscitat mortuos comedere carnem病毒。 Zonbi为了解决眼睛疲劳症而去世。内西欧脑筋不死的僵尸。 Sicut malus putrid伏都教恐怖。                     De carne伐木动物群动脉炎。萨摩姆大脑坐在morb，或马尔菲菲？ De apocalypsi gorger omero不死生还者格言mauris。嗨无脑mortuis没有灵魂的creaturas，imo邪恶的跟踪monstra adventus resi dentevil vultus comedat cerebella viventium。 Qui动画尸体，板球棒最大布鲁克terribilem incessu zomby。伏都教sacerdos食肉者，suscitat mortuos comedere carnem病毒。 Zonbi为了解决眼睛疲劳症而去世。内西欧脑筋不死的僵尸。 Sicut malus putrid伏都教恐怖。 < / p>

  //我会将这些变量缓存在滚动以获得更好的性能
 var navWrap = $（'＃navWrap'），
 nav = $（'nav'），
 startPosition = navWrap.offset（）。top，
 stopPosition = $（'＃stopHere'）。offset（）。top  -  nav.outerHeight（）; 
 
 $（document）.scroll（function（）{
 // stick nav to page of page 
 var y = $（this）.scrollTop（）; 
 
 if（y> startPosition）{
 nav.addClass（'sticky'）; 
 if（y> stopPosition）{
 nav.css（'top'， stopPosition  -  y）; 
} else {
 nav.css（'top'，0）; 
} 
} else {
 nav.removeClass（'sticky' ）; 
} 
}）; 
  

例子

I want to make the fixed scroll stop after reach certain div. I have found others tutorial which place child div inside parent div. But I don't want that.

Please take a look my explanation in code snippet below. I want it's stop the scroll after reach other div.

Any help really appreciate... Thank you.

$(document).scroll(function () {
    //stick nav to top of page
    var y = $(this).scrollTop();
    var navWrap = $('#navWrap').offset().top;
    if (y > navWrap) {
        $('nav').addClass('sticky');
    } else {
        $('nav').removeClass('sticky');
    } 
});

body {
    height:1600px;
    margin:0;
}
#navWrap {
    height:70px
}
nav {
    height: 70px;
    background:gray;
}
.sticky {
    position: fixed;
    top:0;
}

h1 {
    margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit morb​​,o vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<div id="navWrap">
    <nav>
         <h1>I stick to the top when you scroll down and unstick when you scroll up to my original position</h1>
    </nav>
</div>

<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit morb​​,o vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<br>
<div id="stopHere">
<h3 style="color:red">I want it stop fixed scrolling here. If I'm back to scrolling up, It will follow also to original position.</h3>
</div>
<br>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit morb​​,o vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit morb​​,o vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit morb​​,o vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>

解决方案

You can achieve what you want with the following:

// I would cache these vars outside the scroll for better performance
var navWrap = $('#navWrap'),
    nav = $('nav'),
    startPosition = navWrap.offset().top,
    stopPosition = $('#stopHere').offset().top - nav.outerHeight();

$(document).scroll(function () {
    //stick nav to top of page
    var y = $(this).scrollTop();

    if (y > startPosition) {
        nav.addClass('sticky');
        if (y > stopPosition) {
            nav.css('top', stopPosition - y);
        } else {
            nav.css('top', 0);
        }
    } else {
        nav.removeClass('sticky');
    } 
});

Example

这篇关于如何在一定高度后固定滚动div并在到达其他div后停止？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！