Question

我即将为我的考试做一个投资组合。为此，我们有一些文章，我们必须为它做。因此，我做了一个主页，显示了我一直在写的主题，当你点击其中一个时，你立即下到文章。在左侧有一个新的菜单，它是粘性的，并随页面滚动。该菜单仅包含我为该单个

进行的主题

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

编辑：当我写这篇文章时我就在手机上..但这里是HTML，CSS和Jquery上的MENU代码

＆＃13;

  /*** 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');
        }
    });

＆＃13;

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

＆＃13;

 <!-- 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 -->

＆＃13;

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 
  }
});

使粘性物体不再粘

2 个答案: