スティッキースティックが遅すぎる

Question

スティッキーナビでページを作成していて、ヘッダーイメージが消えた直後にページがいっぱいになっていません。 1ページの画像全体のサイズが過ぎた後に固まるだけです。ナビゲーションバー内のテキストも、スティックした後に移動します。

あなたはここにコードを表示することができます。https://jsfiddle.net/zinctan/7a436ojz/

は、これは私のjavascriptです：

$(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 Webページの後に実行されることを保証するために、その機能であなたのjQueryのコードを記述し、その後

$(document).ready(function(){ 

}); 

と：使用することをお勧めしますすべての

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はそれにいくつかの問題を生じさせるので、要素の幅を設定しなければならない。

私は助けてあなたの要求を正しく受けてくれることを願っています。ハッピーコーディング！ :)