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链接

回答

相关问题