Question

我设法在“单击时”更改了“活动”类，但不知道如何在“滚动”时进行更改。如何更改滚动的“活动”课程？另外，页面上链接到页面上不同部分的链接，我如何做到这一点，以便在单击页面上的特定部分时将“活动”类添加到相应的“ li”项中？

谢谢。

CSS样式：

nav.top-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0 1rem 0;

    a.top-nav-logo-wrapper {
        padding-right: 2rem;
        // border: solid red 1px;

        img {
            width: 25rem;
        }
    }

    ul.top-nav-links {
        display: flex;
        flex-direction: row;
        padding-left: 2rem;

        li {
            padding-top: .5rem;
            transition: .4s;

            &::after {
                content: "";
                display: block;
                width: 0;
                height: 2.5px;
                background: $clr-white;
                transition: width .3s;
            }

            &:hover::after {
                width: 100%;
                transition: width .3s;
            }

            a {
                font-size: 1.4rem;
                color: $clr-white;
                text-transform: uppercase;
                font-weight: 400;
                text-decoration: none;
                padding: .5rem;
                opacity: .9;
                transition: .4s;

                &:hover {
                    opacity: 1;
                }
            }

            &.active-desktop {
                opacity: 1;
                font-weight: 900;

                &::after {
                    content: "";
                    display: block;
                    width: 100%;
                    height: 2.5px;
                    background: $clr-white;
                    transition: width .3s;
                }
            }
        }
    }
}

HTML：

<nav id="top-nav" class="top-nav">

        <a href="/index.html" class="top-nav-logo-wrapper">
            <img src="/imgs/pb-logo/logo.png" alt="Logo">
        </a>

        <ul class="top-nav-links">
            <li><a href="/index.html" class="top-nav-link-1">Home</a></li>
            <li class="active-desktop"><a href="#about-section" class="top-nav-link-2">About</a></li>
            <li><a href="#pp-section" class="top-nav-link-3">Product Party</a>
            </li>
            <li><a href="#contact-section" class="top-nav-link-4">Contact</a></li>
        </ul>

    </nav>

Javascript：

$('li > a').click(function () {
        $('li').removeClass();
        $(this).parent().addClass('active-desktop');
    });

Answer 1

尝试一下

jQuery('ul.top-nav-links').scroll(function() {
        $(this).children('li').each(function(){
            var offset = $(this).offset().top;
            if(offset < 0 && offset >= -$(this).height()){
                $('li').removeClass('active-desktop');
                $(this).parent().addClass('active-desktop');
                return false; //"break"
            }
        });
    });

Answer 2

您将需要使用on scroll事件来检测滚动更改，然后实现更改活动类的逻辑。

我为下面的东西创建了一个小提琴

https://jsfiddle.net/RohanPatil/pytvn264/1/

*Messages*

如何滚动更改活动班级？

2 个答案: