使粘性物体停止粘稠

Question

我即将为我的考试做一个投资组合。为此，我们有一些文章我们必须制作。因此，我制作了一个主页，该主页显示了我一直在写的主题，当您单击其中一个主题时，您会立即归结为文章。在左侧，有一个新菜单，它是粘性的，并且页面滚动。该菜单仅包含IM经历的主题

我的问题是，菜单在文章结束后应该停止时继续滚动，因此可以出现新的章节菜单。我该怎么做？

编辑：写它时我在手机上。

  /*** Left Menu ***/
    var navLeftPos = $('#left_menu').offset().top;
    //console.log(navLeftPos)
    $(window).on('scroll', function () {
        console.log($(window).scrollTop())
        if (navTopPos <= $(window).scrollTop()) {
            $('#left_menu').addClass('left_menu')
        }
        if (navTopPos <= $(window).scrollTop() ) {
            $('#left_menu').addClass('left_menu')
        }
        else {
            $('#left_menu').removeClass('left_menu');
        }
    });

/*** Menu sidebar ***/
div#wrapper div#underlayer div#ComputerensHistorie section#left_menu {
    float:left;
    width: 30%;
    padding: 1.5% 1.5% 1.5% 5%;
    background-color: #C4E1AC;
}
div#wrapper div#underlayer div#ComputerensHistorie section.left_menu {
    position: fixed;
    top: 105px;
    left: 0;
}
/***** Overskrift *****/
div#wrapper div#underlayer div#ComputerensHistorie section#left_menu h2 {
    font-family: Frank Ruhl Libre;
    letter-spacing: 2px;
}
div#wrapper div#underlayer div#ComputerensHistorie section#left_menu svg {
    width: 60%;
    margin-bottom: 15px;
}
div#wrapper div#underlayer div#ComputerensHistorie section#left_menu svg .cls-1 {
    stroke-width: 0.5px;
}
/***** Animations understreg *****/
svg#understreg_et line#streg_tre {
    stroke: #3A8540;
    animation: backandforth 12s linear infinite;
}
svg#understreg_et line#streg_to {
    stroke: #fff;
    animation: backandforth 4s linear infinite;
}
svg#understreg_et line#streg_et {
    stroke: #245328;
    animation: backandforth 6s linear infinite;
}
@keyframes backandforth {
    0% {
        transform: scaleX(1);
    }
    25% {
        transform: scaleX(0.8)
    }
    50% {
        transform: scaleX(0.5);
    }
    80% {
        transform: scaleX(0.8);
    }
    100% {
        transform: scaleX(1);
    }
}
/**** Introduktion *****/
div#wrapper div#underlayer div#ComputerensHistorie section#left_menu p {
    font-size: 13px;
    line-height: 150%;
    padding-top: 15px;
    font-family: roboto;
}
/**** Navigation ****/
div#wrapper div#underlayer div#ComputerensHistorie section#left_menu nav {
    font-size: 13px;
    line-height: 150%;
    margin-top: 10%;
}
div#wrapper div#underlayer div#ComputerensHistorie section#left_menu nav ul {}
div#wrapper div#underlayer div#ComputerensHistorie section#left_menu nav ul li {
    list-style-type: none;
}
div#wrapper div#underlayer div#ComputerensHistorie section.left_menu nav ul li.links {
    margin-left: 20px;
    font-family: roboto;
}
div#wrapper div#underlayer div#ComputerensHistorie section#left_menu nav ul li a {
    text-decoration: none;
    line-height: 150%;
    color: black;
    font-family: roboto;
    font-size: 0.9em;
}
div#wrapper div#underlayer div#ComputerensHistorie section#left_menu nav ul li a:hover {
    color: #3f824f;
}
div#wrapper div#underlayer div#ComputerensHistorie section#left_menu nav ul ul {
    margin-left: 15px;
}
div#wrapper div#underlayer div#ComputerensHistorie section#left_menu nav ul li h2 {
    font-size: 14px;
    text-transform: uppercase;
    border-bottom: 1px solid #000;
    margin-bottom: 10px;
    font-family: roboto;
    padding-left: 5px;
    letter-spacing: 0.5px;
    width: auto;
}

 <!-- Menu Left -->
                <section id="left_menu">
                    <h2>Computerens historie</h2>
                    <svg id="understreg_et" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 8"><defs><style>.cls-1{stroke-miterlimit:10;stroke-width:2px;}</style></defs><title>streg</title><line id="streg_tre" class="cls-1" y1="1" x2="60" y2="1"/><line id="streg_to" class="cls-1" x1="72" y1="4" x2="29" y2="4"/><line id="streg_et" class="cls-1" x1="11" y1="7" x2="46" y2="7"/></svg>
                    <p>Vores dagligdag er konstant præget af den elektroniske verden, der omgiver os derhjemme, på gaden, arbejdet - alle steder!</p>
                    <p>Vi forsker hele tiden i hvordan vi kan optimere vores elektroniske viden, hvordan vi kan få det til at se smarter ud og ikke mindst mere praktisk.</p>
                    <p>Men hvordan startede det hele egentlig?</p>
                    <nav>
                        <ul>
                            <li>
                                <h2>Kapitler</h2>
                            </li>
                            <li class="links"><a href="#underlayer">Lommeregneren som Grundsten</a>
                                <ul>
                                    <li><a href="#Antikythera">Antikythera - Den tidligste "computer"</a></li>
                                </ul>
                            </li>
                            <li class="links"><a href="#Stamfader">Stamfaderen</a></li>
                            <li class="links"><a href="DTC">Den tidlige computer</a>
                                <ul>
                                    <li><a href="#Zuse">Konrad Zuse</a>
                                        <ul>
                                            <li><a href="#Z3Computer">Z3 Computeren</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="links"><a href="">Referencer</a></li>
                        </ul>
                    </nav>
                </section>
                <!-- Menu Slut -->

Answer 1

您将计算高度或文章。

var h = $('articile').height();

然后，您将告诉您的页面将元素的CSS更改为相对之后，然后滚动之后，然后是文章的高度

$(window).scroll(function(){
  if(window).scrollTop() > h){
    $('navbar').css('position','relative');
  }
});

如果您共享一些代码，我会更好。

Answer 2

我不知道您正在处理什么，但这可能会有所帮助。

如果您不想要任何孤独者：

$( ".target" ).hide();

如果您可以自行访问代码，则可以运行此操作，或者您只是用户，并且似乎迷上了它滚动的方式，可以在浏览器上使用控制台并添加该代码。

如果您仍然想保留它

var hieght = $('.target').height();
$(window).scroll(function(){
  if(window).scrollTop() > h){
    $('.stickty-menu').css('position','relative');
    // changes position  of sticky menu to relative to end scrolling 
  }
});