让jQuery线条动画在滚动上移动

Question

我的网站上有一条线条，当锚点元素被点击时，它会在锚点元素下生成动画。当用户滚动到相应的部分时，我不希望点击该链接，但我想让它也具有动画效果，但我似乎在执行此操作时遇到了一些麻烦。

这里是我的代码：

HTML

<header id="header"> 
     <div class="container"> 
      <nav id="example-one"> 
       <ul> 
        <li class="current_page_item"><a class="nav" href="#home">Welcome</a></li> 
        <li><a class="nav" href="#featuredWork">Work</a></li> 
        <li><a class="nav" href="#caseStudy">Case Study</a></li> 
        <li><a class="nav" href="#about">About</a></li> 
        <li><a class="nav" href="#contact">Contact</a></li> 
       </ul> 
      </nav> 
     </div> 
    </header> 

jQuery的

$(window).load(function() { 

//Grabs the height value of the header, can use this variable later for css media queieres instead of hardcoding pixel value 
var headerHeight = document.getElementById('header').offsetHeight; 

//Sets top values of sections to later be used in colour change segment 



//Allows for smooth scrolling 
var $root = $('html, body'); 
$('a[href*=#]').click(function() { 
    $root.animate({ 
     scrollTop: $($.attr(this, 'href')).offset().top - headerHeight 
    }, 600); 
    return false; 
}); 

//Change colour of header bar and elements based on which section the user is on 
$(document).scroll(function() { 

    var top1 = $('#home').offset().top; 
    var top2 = $('#featuredWork').offset().top - headerHeight; 
    var top3 = $('#caseStudy').offset().top - headerHeight; 
    var top4 = $('#about').offset().top - headerHeight; 
    var top5 = $('#contact').offset().top - headerHeight; 


    if ($(document).scrollTop() >= top1 && $(document).scrollTop() < top2) { 
    $('#header').css('background-color', '#dadfe0'); 
    $('.nav').css('color', '#21303f'); 
    } else if ($(document).scrollTop() >= top2 && $(document).scrollTop() < top3) { 
    $('#header').css('background-color', '#21303f'); 
    $('.nav').css('color', '#dadfe0'); 
    } else if ($(document).scrollTop() >= top3 && $(document).scrollTop() < top4) { 
    $('#header').css('background-color', '#dadfe0'); 
    $('.nav').css('color', '#21303f'); 
    } else if ($(document).scrollTop() >= top4 && $(document).scrollTop() < top5) { 
    $('#header').css('background-color', '#21303f'); 
    $('.nav').css('color', '#dadfe0'); 
    } else if ($(document).scrollTop() >= top5) { 
    $('#header').css('background-color', '#dadfe0'); 
    $('.nav').css('color', '#21303f'); 
    } 

}); 

//Magic line 

$(function() { 


    /* Add Magic Line markup via JavaScript, because it ain't gonna work without */ 

    $("#example-one").append("<li id='magic-line'></li>"); 


    /* Cache it */ 
    var $magicLine = $("#magic-line"); 

    $magicLine 
     .width($(".current_page_item").width()) 
     .css("left", $(".current_page_item a").position().left) 

    $("#example-one li").find("a").click(function() { 
     $el = $(this); 
     leftPos = $el.position().left; 
     newWidth = $el.parent().width(); 

     $magicLine.stop().animate({ 
      left: leftPos, 
      width: newWidth 
     }); 
    }); 


}); 

}); 

我已经包含了整个jQuery的文件，因为我已经有到位一些滚动功能用于标题颜色更改。

另外这里是我的投资组合网站，因为它现在，所以你可以更好地了解我想要实现的目标。

Portfolio Site - Work In Progress

预先感谢任何帮助。

Answer 1

您可以检查this fiddle得到帮助，你的菜单:)

的JS代码：

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

    //smoothscroll 
    $('a[href^="#"]').on('click', function (e) { 
     e.preventDefault(); 
     $(document).off("scroll"); 

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

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

function onScroll(event){ 
    var scrollPos = $(document).scrollTop(); 
    $('#menu-center a').each(function() { 
     var currLink = $(this); 
     var refElement = $(currLink.attr("href")); 
     if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
      $('#menu-center ul li a').removeClass("active"); 
      currLink.addClass("active"); 
     } 
     else{ 
      currLink.removeClass("active"); 
     } 
    }); 
}