粘性导航太迟了

Sticky Nav Sticks Too Late

本文关键字：太迟 导航      更新时间：2023-09-26

我正在创建一个带有粘性导航的页面，它不会在标题图像移动后立即粘在顶部(它小于整个页面大小)。它只会在一个整页图像的大小过去之后才会出现。导航栏内的文字在粘贴后也会移动。

您可以在这里查看代码: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);
    });
});

});

任何帮助都是有用的!谢谢:)

首先使用:

$(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类，以便命令你的导航栏在用户窗口的顶部开始，并覆盖整个网页的宽度(position:fixed会产生一些问题，所以你必须设置元素的宽度，记住这一点)。

我希望我帮了忙，我满足了你的要求。编码快乐!:)

相关文章：