スムーススクロールの固定ヘッダーのアカウント

私のサイトでスムーズなスクロールを行うためにjQueryスクリプトを使用していますが、私は固定ポジションヘッダーを持っていますが、固定ヘッダーサイズをどのように考慮するかはわかりませんそれは下にスクロールし、固定ヘッダーはタイトルをカバーします。スムーススクロールの固定ヘッダーのアカウント

$(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 
       }, 1000); 
       return false; 
      } 
     } 
    }); 
});

誰にも何か提案がありますか？ここで

出典

2016-12-13 user2513528

'header.height（）'を取得し、 'target.offset（）。top'から引き算できますか？ –

あなたはあなたにビューを移動している位置からそれを差し引くことにより、固定ヘッダの高さを収容する必要があります。

$('html, body').animate({ 
    scrollTop: target.offset().top - fixedHeader.outerHeight() 
}, 1000);

「fixedHeader」は、固定ヘッダーに使用している要素に置き換えてください。

出典

2016-12-13 11:42:36 sankorati

は、固定ヘッダを作成しているHTMLやCSSの一部です：

<html> 
<head> 
    <style type="text/css"> 
     body { 
      margin: 0px; 
      background: #000; 
     } 

     .header-cont { 
      width: 100%; 
      position: fixed; 
      top: 0px; 
     } 

     .header { 
      height: 50px; 
      background: #F0F0F0; 
      border: 1px solid #CCC; 
      width: 960px; 
      margin: 0px auto; 
     } 

     .content { 
      width: 960px; 
      background: #F0F0F0; 
      border: 1px solid #CCC; 
      height: 2000px; 
      margin: 70px auto; 
     } 
    </style> 
</head> 
<body> 
    <div class="header-cont"> 
     <div></div> 
    </div> 

    <div></div> 
</body> 
</html>

出典

2016-12-13 11:30:00

こんにちは、申し訳ありませんが私は少し良く説明する必要がありました、私は私の元の質問を編集しました – user2513528

スムーススクロールの固定ヘッダーのアカウント

答えて

関連する問題