Question

我希望我的网页导航能够像这样工作： example web page

当您在页面上滚动时，导航链接也会更改。

以下是我的导航设置方式：

 <nav>
    <ul class="navigation">
        <li>
            <a href="#home" class="smoothScroll">

                <span class="label-nav">
                    Home
                </span>
            </a>
        </li>
        <li>
            <a href="#aboutus" class="smoothScroll">

                <span class="label-nav">
                    About Us
                </span>
            </a>
        </li>
        <li>
            <a href="#families" class="smoothScroll">

                <span class="label-nav">
                    Families
                </span>
            </a>
        </li>
        <li>
            <a href="#contact" class="smoothScroll">
                <span class="label-nav" >
                    Contact
                </span>
            </a>
        </li>
    </ul>
</nav>

平滑滚动适用于我的网站。我可以点击每个导航链接，并通过smoothScroll.js的帮助动画到页面的该部分

我把它设置为我的css：

a.visited{
  font: #fff;
  background-color: #3498db;
}

单击我的导航工作正常，但是当我滚动到页面的该部分时，我需要让a.visted工作。

以下是我导航的stickyMenu的一些代码：

 function stickyMenu() {

    $(window).scroll(function () {
        if ($(window).scrollTop() > 35) {
            $('#header').addClass('sticky-header');
            $('.sticky-navigation,#to-top-button').fadeIn();

            if ($(this).scrollTop() < $('section[data-anchor="home"]').offset().top) {
                $('nav a').removeClass('active');
            }

            if ($(this).scrollTop() >= $('section[data-anchor="home"]').offset().top) {
                $('nav a').removeClass('active');
                $('nav a:eq(0)').addClass('active');
            }

            if ($(this).scrollTop() >= $('section[data-anchor="aboutus"]').offset().top) {
                $('nav a').removeClass('active');
                $('nav a:eq(1)').addClass('active');
            }
            if ($(this).scrollTop() >= $('section[data-anchor="families"]').offset().top) {
                $('nav a').removeClass('active');
                $('nav a:eq(2)').addClass('active');
            }
            if ($(this).scrollTop() >= $('section[data-anchor="contact"]').offset().top) {
                $('nav a').removeClass('active');
                $('nav a:eq(3)').addClass('active');
            }

        }
        else {
            $('#header').removeClass('sticky-header');
            $('.sticky-navigation,#to-top-button').fadeOut();
        }
    });
}

我按照这样设置每个部分，并为导航的每个部分执行此操作：

<div id="content">
<section id ="about" data-anchor="about">

任何帮助都会很感激，因为我正在学习js和jquery，因为我正在学习HTML。指向我需要修复的某些文件，这样我就可以解决这个问题也很有帮助！

Answer 1

您需要实施Scrollspy，因此窗口会知道哪些元素是可见的＆amp;然后可以应用适当的类来进行样式化。

通过滚动到页面的不同部分来更改导航

1 个答案: