스티키 네비게이션 스틱이 너무 늦음

Question

스티키 네비게이션이 포함 된 페이지를 만들고 헤더 이미지가 사라진 직후에 스틱이 움직이지 않는 페이지를 만듭니다 (전체 페이지 크기보다 작음). 하나의 전체 페이지 이미지 크기가 지난 후에 만 ​​붙습니다. 탐색 막대 안의 텍스트도 막대기 후에 움직입니다.

당신은 여기에 코드를 볼 수 있습니다

: 이것은 내 자바 스크립트입니다 https://jsfiddle.net/zinctan/7a436ojz/

:

$(function() { 

// when we scroll down the window, do this: 
$(window).scroll(function(){ 

    //Getting the scroll percentage 
    var windowHeight = $(window).height(); 
    var scrollHeight = $(window).scrollTop(); 
    var scrollPercentage = (scrollHeight/windowHeight); 
    console.log(scrollPercentage); 

    // if we have scrolled past 200, add the alternate class to nav bar 
    if(scrollPercentage > 1) { 
     $('.navHighlighter').addClass('scrolling'); 
    } else { 
     $('.navHighlighter').removeClass('scrolling'); 
    } 

}); 

$('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
    var target = $(this.hash); 
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
    if (target.length) { 
     $('html,body').animate({ 
     scrollTop: target.offset().top - 80 
     }, 1000); 
     return false; 
    } 
    } 
}); // code courtesy of CSS-Tricks 

// apply the class of nav-active to the current nav link 
$('a').on('click', function(e) { 
    e.preventDefault(); 
    $('li.nav-active').removeClass('nav-active'); 
    $(this).parent('li').addClass('nav-active'); 
}); 


// get an array of 'href' of each a tag 

var navLink = $('ul.navHighlighter a'); 
console.log(navLink); 
var aArray = []; 

for(var i = 0; i < navLink.length; i++) { 
    console.log(i); 
    var aChild = navLink[i]; 
    var navArray = $(aChild).attr('href'); 
    console.log(navArray); 
    aArray.push(navArray); 
    console.log(aArray); 
    var selector = aArray.join(" , "); 
    console.log(selector); 
} 

$(window).scroll(function(){ 
    var scrollTop = $(window).scrollTop(); 
    var tops = []; 

    $(selector).each(function(){ 
     var top = $(this).position().top - 90; 
     if(scrollTop > top) { 
      var id = $(this).attr('id'); 
      $('.nav-active').removeClass('nav-active'); 
      $('a[href="#'+id+'"]').parent().addClass('nav-active'); 
     } 
     tops.push(top); 
    }); 

}); 

을});

도움이 될 것입니다. 당신의 스크립트 코드가 HTML 웹 페이지 다음에 실행되도록 보장하기 위해

$(document).ready(function(){ 

}); 

를 다음 순서로 그 기능에 jQuery 코드를 쓰기 : 그것을 사용하는 것이 좋습니다 당신 : 모든

Answer 1

먼저 감사 완전히로드되었습니다.

지금, 나는 그 일을해야한다고 생각 : 또한

$(document).ready(function() { 
    var topDist = $(".navHighlighter").position(); //save the position of your navbar, better use an id for that 
    $(document).scroll(function() { 
     var scroll = $(this).scrollTop(); 
     if (scroll > topDist.top) { //when the scrolling reaches the very top of your navbar 
      $('.navHighlighter').addClass('scrolling'); 
     } else { 
      $('.navHighlighter').removeClass('scrolling'); 
     } 
    }); 
    *rest of your code goes here* 
}); 

, 추가

top:0; 
width: 100%; 

당신의 .scrolling 클래스에 시작하는 당신의 네비게이션 바 명령하기 위해 단지의 상단에 사용자의 창과 웹 페이지의 전체 너비를 커버하기 위해 (position : fixed는 그에 대한 몇 가지 이슈를 생성하므로 요소의 너비를 설정해야합니다.

내가 도왔기를 바랬습니다. 나는 당신의 요구를 올바르게 받아 들였습니다. 해피 코딩! :)