滚动以固定导航栏锚定，导航滚动后修复导航

我有一个导航栏，它固定到屏幕顶部后，它向上滚动160px。如果导航栏已经固定在屏幕的顶部，我也可以使用平滑的滚动条进行定位链接，但是如果导航栏在滚动160px之前处于其未定义状态，则锚点滚动条不会进入说明我添加的40px缓冲区。滚动以固定导航栏锚定，导航滚动后修复导航

我希望平滑滚动滚动到正确-40px的锚点，不管导航栏是否固定。是

的两批我使用的代码如下：

1）平滑滚动

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 

    }); 
});

任何想法？

在此先感谢。

来源

2016-11-23 SharpenedPixels

检查导航栏是否具有“nav-primary-fixed”类，然后相应地修改40值......？ – CBroe

我不确定你是否误解了这个问题。如果网站已经滚动超过160像素，并且导航栏已分配了“nav-primary-fixed”，则锚点滚动完美。如果站点没有从顶部滚动并且导航栏尚未修复，它不会正确对齐锚点。因此，例如在页面加载时，如果我点击并锚定链接，它将滚动到锚点，但锚点的顶部将隐藏在导航栏后面40px。如果你的解决方案是前进的正确方法，我不知道如何去编码到我当前的代码。 – SharpenedPixels

只有在导航栏被固定的情况下，您才需要这些40px的偏移量。因此，检查它是否（.hasClass） - 并根据这一点，减去那些40px，或不。 – CBroe

好吧，在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; 
     } 
     } 
    } 
    }); 
});

来源

2016-11-23 17:02:50 SharpenedPixels

太好了，但你仍然可以缩短一点。看看if-和else-分支，它们的代码与实际使用的值相同。所以为什么不把这个值存储到一个变量中，然后将代码放入if和else中，使用变量代替40/80 ... – CBroe

我已经添加了另一个elseif语句来应用另一个对于屏幕宽度小于960像素的值，因为移动设备和平板电脑无法正确对齐定位点，而我已经修复了所有问题。我确实尝试过类似的东西，但它不起作用，但之后我没有尝试使用工作代码中使用的确切if，elseif，else语句，所以如果我再次修改它，我可以缩短为你建议。再次感谢。 – SharpenedPixels

滚动以固定导航栏锚定，导航滚动后修复导航

回答

相关问题