Question

首先提一下我现在正在学习jquery，而且几乎没有任何不受欢迎的事情。我想在我的网站上使用我的粘性导航。这是我的标记：

<div class="navbar">
<nav>
    <p id="navLogo">Forza</p>
    <ul>
        <li><a href="#services" class="">Services</a></li>
        <li><a href="#portfolio" class="nav-link">Portfolio</a></li>
        <li><a href="#testemonials" class="nav-link">Testemonials</a></li>
        <li><a href="#team" class="nav-link">Team</a></li>
        <li><a href="#features" class="nav-link">Features</a></li>
        <li><a href="#news" class="nav-link">News</a></li>
        <li><a href="#contact" class="nav-link">Contact</a></li>
    </ul>
</nav>

当页面加载后，背景是透明的，徽标和链接是白色的。当我向下滚动时，我希望背景变为白色，链接和徽标会改变颜色，所以我使用以下jquery：

$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#services');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $(".navbar").css('background-color', 'rgba(255, 255, 255, 0.95)')
          $("nav").css('margin-top', '10px');
          $("#navLogo").css('color', '#4d4141');
          $(".nav-link").css('color', '#4d4141');
       } else {
          $('.navbar').css('background-color', 'transparent');
          $("nav").css('margin-top', '35px');
          $("#navLogo").css('color', '#fff');
          $(".nav-link").css('color', '#fff');
       }
   });
    }
});

它运作得很好。但我也希望导航中的服务链接在我滚动到服务部分时接收活动类，与所有其他链接相同，活动类设置为不同的颜色。为此，我使用以下代码：

  $(document).ready(function () {
    $(document).on("scroll", onScroll);

    $('a[href^="#"]').on('click', function (e) {

        $(document).off("scroll");

        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');

        var target = this.hash;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

现在，当我向下滚动链接时，接收的类处于活动状态，但第一个jquery会覆盖其color属性并保持相同的颜色。我怎样才能将这两者结合起来，使它们共同发挥作用。请注意，我是jquery的新手，所以只有非常具体的建议才能帮助我。提前谢谢！

粘性导航问题

0 个答案: