讓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"); 
     } 
    }); 
}