Добавления неопределенного белого пространства над бутстрапом 3 аффикса/scrollspy

Question

Если проверить эту ссылку, вы увидите, что, как вы прокрутите вниз, навигация и наклеить и scrollspy функциональности (от 3 бутстрапа)

http://codepen.io/datanity/pen/thnua

Однако, если вы добавляете пробел вверху, аффикс/scrollspy происходит в неправильном месте. Например, это 800px белого пространства на столе.

http://codepen.io/datanity/pen/haKzg

Теперь, конечно, здесь, вы можете настроить аффикс/scrollspy код так, как он работает с 800px высотой ONTOP, но, моя проблема в том, что я понятия не имею, что пространство у меня будет на вершине. Иногда это будет 2000px других времен только 300px. Кроме того, для меня нет способа узнать id/class divs, которые появляются на столе. Иногда это будет 10 div, иногда 0, и они всегда будут иметь разные id/classes.

Есть ли способ, с помощью которого можно запускать аффикс и scrollspy относительно контейнера, в котором он находится, а не фиксированное расположение пикселей из верхней части тела?

Спасибо за помощь! Tim

Answer 1

добавив в верхней части JS исправили проблему. С помощью этого метода не имеет значения, сколько белого пространства или сколько div у вас есть. Ваш бутстрап scrollspy и аффикс всегда будут в правильном месте!

$('#mynav').affix({ 
    offset: { 
    top: $('#mynav').offset().top 
    , bottom: function() { 
     return (this.bottom = $('.bs-footer').outerHeight(true)) 
    } 
    } 
}); 

Answer 2

Добавить идентификатор элемента раздела (расположенного вверху страницы HTML). Я предполагаю, что это тот элемент, что вас беспокоит изменение высоты.

<section id="top-section" style="height:800px;"> 
</section> 

Затем добавьте эти строки в файл JS:

var $h = $("#top-section").height() + 280; 
$("#mynav").attr("data-offset-top", $h); 

Это запрашивает визуализированную высоту элемента секции, а затем фиксирует вашу высоту срабатывания боковой панели соответственно.

Если у вас также будет неизвестное количество разделов, вы должны обернуть код, который создает разделы в элементе div. Например, если вы используете PHP, чтобы построить область раздел вашей страницы, вы должны сделать что-то вроде этого:

<div id="section-wrapper"> 
    <?php echo "Whatever code you have here" ?> 
</div>