0

160px 上にスクロールした後、画面の上部に固定されるナビゲーション バーがあります。また、アンカー リンクにはスムーズ スクロールを使用します。これは、ナビゲーション バーが既に画面の上部に固定されている場合にうまく機能しますが、160 ピクセル上にスクロールする前にナビゲーション バーが固定されていない状態にある場合、アンカー スクロールは取り込まれません。私が追加した40pxのバッファを考慮してください。

ナビゲーションバーが固定されているかどうかに関係なく、スムーズスクロールで正確に-40pxまでスクロールしたい。

私が使用している2つのコードは次のとおりです。

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

    });
});

何か案は？

前もって感謝します。

4

1 に答える 1

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;
        }
      }
    }
  });
});
于 2016-11-23T17:02:50.307 に答える