Question

我有一个导航栏，在向上滚动160px后固定到屏幕顶部。如果导航栏已经固定到屏幕顶部，我也使用平滑滚动来实现锚定链接，但是如果导航栏在向上滚动160px之前处于未固定状态，则锚定滚动不会考虑到我添加的40px缓冲区。

无论导航栏是否固定，我希望平滑滚动精确地滚动到锚点-40px。

我使用的两批代码如下：

1）Smooth Scroll

jQuery(document).ready(function($) {
  $('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 - 40
        }, 750);
        return false;
      }
    }
  });
});

2）固定导航栏

jQuery(document).ready(function($){
    $(function() {
        $(window).resize(function() {
        // responsive nav primary fixed
        if (window.innerWidth > 960) {
            $(window).bind('scroll', function (){ if ($(window).scrollTop() > 160) {$('.nav-primary').addClass('nav-primary-fixed');} else {$('.nav-primary').removeClass('nav-primary-fixed');}});
        } else {}
        // end responsive nav primary fixed
    }) .resize(); // trigger resize event

    });
});

有什么想法吗？

提前致谢。

Answer 1

好的，在CBroe的一些帮助下，我在对问题的评论中对.hasClass进行了一些研究，发现了一些帮助我找到方法的文章，下面的jQuery代码是经过修改的。现在正在工作，代码：

jQuery(document).ready(function($) {
  $('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 ($(".nav-primary").hasClass("nav-primary-fixed")) {
        if (target.length) {
          $('html, body').animate({
            scrollTop: target.offset().top - 40
          }, 750);
          return false;
        }
      } else {
        if (target.length) {
          $('html, body').animate({
            scrollTop: target.offset().top - 80
          }, 750);
          return false;
        }
      }
    }
  });
});

使用固定导航栏滚动到锚点，滚动后导航修复

1 个答案: