粘性导航问题

时间:2015-01-23 23:04:35

标签: jquery nav sticky

首先提一下我现在正在学习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 个答案:

没有答案