使粘性物体不再粘性答案

【问题标题】：Make sticky object stop being sticky使粘性物体不再粘性
【发布时间】：2018-05-19 06:39:21
【问题描述】：

我即将为我的考试制作一个作品集。为此，我们必须为此撰写一些文章。因此我做了一个主页，上面显示了我一直在写的主题，当你点击其中一个主题时，你会立即看到这篇文章。在左侧有一个新菜单，它是固定的，并随着页面滚动。菜单仅包含我为该单曲所经历的主题

我的问题是，菜单在页面滚动时保持不变，当文章结束后它应该停止时，会出现一个新的章节菜单。我该怎么做？

编辑：我在写它的时候正在我的手机上。但这里是 HTML、CSS 和 Jquery 上的 MENU 代码

  /*** 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 -->

【问题讨论】：

您能否发布一些代码（或图片）来证明您遇到的问题
不向我们展示代码，任何答案都是猜测。 How do I ask a good question?
请给我们一些代码。也告诉我们你自己尝试过什么。也许一些想要的和当前的结果图像会很有帮助。

标签： jquery html css scroll navigation

【解决方案1】：

您将计算高度或文章。

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

然后你会告诉你的页面在滚动超过文章高度后将元素的 css 更改为相对

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

如果你分享一些代码，我会更好地帮助你。

【讨论】：

【解决方案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 
  }
});

【讨论】：