ブートストラップnavbar-fixed-top hides #content links

Question

私はソフトウェア開発の学生です。私のWeb開発クラスでは、私はページを作成しています。私はブートストラップを使用しています。私はnavbar-fixed-topを持っていて、本体はtable-stripedのテーブルで、すべての行に<a href = "#section" >Section</a>"というリンクがあります。

これは非常に長いリストなので、jQuery UIオートコンプリートとボタンを追加したので、ユーザーがボタンを押すと（オートコンプリートで）、対応する#section行にリダイレクトされます。

オートコンプリートとボタンはうまく動作しますが、ページがリダイレクトされると、見たい行がナビバーの後ろに隠れてしまいます。

私はこれに少しをよく読んで、これを行うために迅速かつ汚い方法は、CSSを経由していることがわかった。

padding-top: 65px; 

Buuuuuuut私はそれが信じられないほど長いテーブルになりますので、これをやりたいいけません。私は自分自身が明らかにされなかった場合

申し訳ありませんが、ここではいくつかのコードは、念のためです：

例のHTML

<script> 

    //code for the redirects 
    (function ($) { 
     $.fn.goTo = function() { 
      $('html, body').animate({ 
       scrollTop: $(this).offset().top + 'px' 
      }, 'fast'); 
      return this; // for chaining... 

     } 
    })(jQuery); 

</script> 
<button class="btn btn-info" onclick="$('#' + document.getElementById('tags').value).goTo();" >Search</button> 

<!-- I dont know if theres a way to optimize this search code but right now its working fine--> 

<div class="table-responsive"> 
    <table class="table table-striped table-hover table-condensed"> 
     <thead> 
      <tr> 
       <th>Col 1</th> 
       <th>Col 2</th> 
       <th>Col 3</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr id = "Section1"> 
       <th>Col 1</th> 
       <th>Col 2</th> 
       <th>Col 3</th> 
      </tr> 
      <tr id = "Section2"> 
       <th>Col 1</th> 
       <th>Col 2</th> 
       <th>Col 3</th> 
      </tr> 
      <!-- code continues similarly for nearly 1000 rows --> 
     </tbody> 
    </table> 
</div> 

Answer 1

は単にscrollTopスプライト方程式へのナビゲーションバーの高さのオフセットを追加します。

//code for the redirects 
(function ($) { 
    $.fn.goTo = function() { 

     var offset = $(this).offset().top - 65; 

     $('html, body').animate({ 
      scrollTop: offset + 'px' 
     }, 'fast'); 
     return this; // for chaining... 
    } 
})(jQuery); 

あなたはそれをさらに1ステップ進めて、navbarの高さを動的につかむことさえできます。

Answer 2

あなたのコードのための迅速かつより良い解決策uは、ブートストラップなどjqueryのを知っているので、DataTableのプラグインを使用して、プラグインを適用するuが検索、フィルタリング、ページネーションとはるかに心配する必要はありません。ここに参考リンクがあります。 https://datatables.net/

$(document).ready(function(){ 
    $('.table-responsive').DataTable({// Use id/ Class of html table to apply plugin 
    // u can do stuffs here 
     }); 
    });