Навигатор скрывает текст после нажатия на ссылку привязки

Question

Я недавно использовал Twitter Bootstrap, и мне это нравилось.

Я создал навигационную панель, прикрепленную к вершине, и внутри нее находится мой логотип, заголовок, несколько ссылок и раскрывающееся меню, в котором говорится: «Перейти к:». При нажатии на раскрывающийся список меню происходит с четырьмя ссылками на раздел внутри страницы. Все ссылки работают.

Моя проблема в том, что заголовок каждого раздела теперь помещен в верхней части моей страницы, мой фиксированный навигатор блокирует его. В любом случае, я могу остановить это? Немного jQuery или что-то еще?

Это мой сайт: fishyfishy2014.gweb.io. Заранее спасибо.

Answer 1

Вы должны установить это:

body { padding-top: 70px; }

Это исходит из самих докторов Bootstrap

набивка тела требуется Фиксированный Navbar будет накладывать свой другой содержание, если не добавить отступы наверху. Попробуйте собственные значения или воспользуйтесь нашим описанием ниже. Совет. По умолчанию навигационная панель 50px high.

Вы можете проверить here

Answer 2

Я думаю, что вы спрашиваете о якорной прыжка, который будет поместить соответствующий якорь в верхней части окна просмотра и «под» фиксированной нав. У меня был подобный вопрос и использовать этот код:

/* fixing anchor jumps */ 

var nav_height = 77; // pixels 

$(window).bind('hashchange', function(e){ 
    if($(location.hash).hasClass('anchor')){ 
     scrollBy(0, nav_height); 
    } 
    return false; 
}); 
$(document).ready(function(){ 
    if($(location.hash).hasClass('anchor')){ 
     $('html,body').animate({ 
      scrollTop: $(location.hash).offset().top - nav_height - 10 
     }, 10); 
    } 
}); 

Вы просто должны добавить класс anchor CSS к любому элементу, который вы хотите быть в состоянии перейти.

Answer 3

На самом деле решение 2ndkauboy действительно работает. Короче говоря:

1. избавиться от «рх» в nav_height переменной (... как вы сказали)

2. использовать anchor класс CSS (..., как 2ndkauboy сказал), но DONOT использовать его на <a> тега, но на <div> следующим образом:

   <a href="#jump_here">click here</a> ... other code here ... <div id="jump_here" class="anchor"> ... content ... </div>

Надеются, что это помогает.