Bootstrap navbar-fixed-top verbirgt #content links

Question

Ich bin ein Softwareentwicklungsstudent und für meine Webentwicklungsklasse erstelle ich eine Seite. Ich benutze Bootstrap, ich habe eine navbar-fixed-top und der Körper ist eine table-striped Tabelle, wo jede Zeile eine <a href = "#section" >Section</a>" Verbindung hat.

Die Sache ist, dass es eine sehr lange Liste ist, so fügte ich eine jQuery UI Autocomplete und eine Schaltfläche, so wenn der Benutzer die Schaltfläche (unterstützt mit der Autocomplete) leitet es in die entsprechende # Abschnitt Zeile umgeleitet.

die Autocomplete und der Button funktionieren einwandfrei, aber wenn die Seite umgeleitet wird, wird die Zeile, die ich sehen will, hinter der Navbar versteckt.

las ich ein wenig in diesen und fand, dass die schnelle und schmutzige Art und Weise dies mit ist über CSS zu tun:

padding-top: 65px; 

Buuuuuuut das ich nicht wollen, zu tun, weil es in einem unglaublich langen Tisch führen.

Sorry, wenn ich mich klar nicht gemacht habe, hier ist ein Code für alle Fälle:

Beispiel 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

einfach die von der navbar Höhe in die Gleichung scrollTop Offsetzumischung.

//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); 

Sie könnten sogar einen Schritt weiter gehen und dynamisch die Höhe der Navbar auch greifen.

Answer 2

Eine schnelle und bessere Lösung für Ihren Code da u wissen Bootstrap jquery etc, verwenden Datatable-Plugin, Plugin u brauchen sich keine Sorgen über die Suche, Filterung, Paginieren und vieles mehr anwenden. Hier ist der Referenzlink; https://datatables.net/

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