Bootstrap navbar-fixed-top隱藏#content鏈接

我是一名軟件開發學生和我的web開發課程我正在創建一個頁面。我正在使用Bootstrap，我有一個navbar-fixed-top，正文是table-striped表，其中每行都有一個<a href = "#section" >Section</a>"鏈接。Bootstrap navbar-fixed-top隱藏#content鏈接

事情是它是一個很長的列表，所以我添加了一個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>

來源

2016-08-01 Adan Sandoval

只需添加偏移導航欄高度進入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);

你甚至可以更進一步動態地抓取導航欄的高度。

來源

2016-08-01 20:11:54

我現在明白了這個問題，答案更新。 –

完美工作，非常感謝！ –

爲您的代碼快速和更好的解決方案，因爲你知道引導的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 
     }); 
    });

來源

2016-08-02 18:48:56 rajiv

Bootstrap navbar-fixed-top隱藏#content鏈接

回答

相關問題