異なる高さを持つ複数の固定されたnavbarのスムーススクロール

Question

スムーズなスクロールがデスクトップ用に完全にうまく動作する固定トップナビゲーションバー（75px高さ）があります。私が小さな画面にいるときは、アンカードーズが正しい場所に届くように、高さの低い別のnavbar（高さ50px）を持っています。

// Smooth Scoll 
$('a[href*="#"]') 
    .not('[href="#"]') 
    .not('[href="#0"]') 
.click(function(event) { 
     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) { 
       event.preventDefault(); 
       $('html, body').animate({ 
        scrollTop: target.offset().top -75 
       }, 1200, function() { 
        var $target = $(target); 
        $target.focus(); 
        if ($target.is(":focus")) { 
         return false; 
        } else { 
         $target.attr('tabindex','-1'); 
         $target.focus(); 
        }; 
       }); 
      } 
     } 
}); 

target.offset().topは、クリックしたナビゲーションバーに応じて設定できます。いいえ、CSSのソリューションをお願いします。

Answer 1

画面幅チェックを追加し、75

// Smooth Scoll 
$('a[href*="#"]').not('[href="#"]') .not('[href="#0"]').click(function(event) { 
     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) { 
       event.preventDefault(); 
       $('html, body').animate({ 

       // change dependant on screen width 
       if ($(window).width() < 960) { // set in px 
        scrollTop: target.offset().top -50 
       } else { 
        scrollTop: target.offset().top -75 
       }   

       }, 1200, function() { 
        var $target = $(target); 
        $target.focus(); 
        if ($target.is(":focus")) { 
         return false; 
        } else { 
         $target.attr('tabindex','-1'); 
         $target.focus(); 
        }; 
       }); 
      } 
     } 
}); 

それともでき

50に変更し、より良いクリック

//set nav 
var nav = $('.nav-bar'); // update to your nav class 

// Smooth Scoll 
$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(event) { 

    // get nav height 
    var NavHeight = nav.height(); 

     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) { 
       event.preventDefault(); 
       $('html, body').animate({ 

       // minus nav height 
       scrollTop: target.offset().top - NavHeight 

       }, 1200, function() { 
        var $target = $(target); 
        $target.focus(); 
        if ($target.is(":focus")) { 
         return false; 
        } else { 
         $target.attr('tabindex','-1'); 
         $target.focus(); 
        }; 
       }); 
      } 
     } 
});