粘滯導航棒太遲

Question

我使用粘性導航創建頁面，並且在標題圖像移開後它不會緊貼頂部（小於整頁大小）。它只在一張完整頁面圖像的大小通過後才粘住。導航欄內的文本在粘貼後也會移動。

您可以查看這裏的代碼：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); 
    }); 

}); 

}）;

任何幫助將是有用的！謝謝:)

Answer 1

首先，它是一個很好的做法，使用方法：

$(document).ready(function(){ 

}); 

，然後寫在函數jQuery代碼，以確保您的腳本代碼後，您的HTML網頁運行已完全加載。現在

，我認爲這應該工作：

$(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類，以指揮你的導航欄開始就在的頂部用戶的窗口，並覆蓋整個網頁的寬度（位置：固定創建一些問題，所以你必須設置元素的寬度，記住）。

我希望我能幫上忙，並且我的要求正確。快樂的編碼！ :)