Как отобразить связанную с секцией под бутстрапом навигационную панель

Question

Как отобразить раздел «привязано к» под навигационной панелью Bootstrap?

Я использую последнюю версию Twitter Bootstrap, а именно 3.03 вместе с ASP.NET MVC 5.

У меня есть Navbar в верхней части моей страницы, и мою разметка для этой навигационной панели выглядит следующим образом:

<header class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       @Html.ActionLink("Brendan Vogt", "Index", "Home", null, new { @class = "navbar-brand" }) 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="@(Model.Equals("home") ? "active" : "")"> 
         <a href="@Url.Action("Index", "Home")"> 
           <span class="glyphicon glyphicon-home"></span> Home 
         </a> 
        </li> 
        <li class="@(Model.Equals("about") ? "active" : "")"> 
         @Html.ActionLink("About", "About", "Home") 
        </li> 
       </ul> 
      </div> 
    </div> 
</header> 

У меня есть следующий в моем CSS файл:

body 
{ 
    padding-top: 60px; 
} 

Вот разметка на моей странице:

<div class="container"> 
    <h1>About My Website</h1> 
    <p>This is my <a href="#test-link">Test Link</a>.<p> 
    <h2 id="test-link">About Test Link</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</div> 

Когда пользователь нажимает на тестовую ссылку, мне нужно это, чтобы перейти к заголовку h2, который ys О тестовой ссылке, которая находится на одной странице, но немного ниже, а затем мне нужно, чтобы этот h2-заголовок был видимым в верхней части страницы. В настоящее время, когда я нажимаю на Test Link, заголовок h2 находится в верхней части страницы, но за навигационной панелью. Как заставить его отображать под навигационной панелью, например, с моим заголовком h1 «О моем сайте», когда страница загружается в первый раз?

Answer 1

Я вижу, что вы переживаете. Если вы хотите, чтобы ваш h2-заголовок отображался только под навигационной панелью, как ваш h1-заголовок, когда кто-то нажимает на тестовую ссылку, вам придется вычесть 60px из общего количества прокрутки. И это невозможно с CSS, я думаю. Итак, вот решение JQuery для вас:

$("a[href*=#]").click(function() { 
    $("html, body").animate({ 
    scrollTop: $($(this).attr("href")).offset().top - 60 + "px" 
    }); 
    return false; 
}); 

JS FIDDLE DEMO

Если вы хотите больше места, то просто увеличить значение от 60 до все, что вы хотите. Кроме того, я не указал точный идентификатор, потому что предполагаю, что могут быть и другие ссылки, для которых вам нужен тот же эффект. Таким образом, вы в безопасности, и вам не нужно жестко кодировать идентификатор каждый раз, когда вы хотите получить тот же эффект для других ссылок.