Щебетать Bootstrap с фиксированной навигационной панелью на прокрутке с привязкой ссылок на странице

Question

У меня есть веб-страница с верхней горизонтальной навигационной панелью - это, скорее, точный ботстрап Twitter Bootstrap с верхним фиксированным положением (на самом деле это не совсем исправлено с помощью CSS, см. JavaScript ниже), поэтому панель навигации сначала будет видна внизу страницы, а затем отображается в верхней части страницы при прокрутке (position: fixed; top: 0).

У меня есть ссылки для навигации, созданные с привязными тегами, чтобы привлечь зрителя в разные места в теле страницы. К сожалению, иногда пользователь слишком сильно падает (особенно если пользователь находится в верхней части страницы, а панель навигации еще не зафиксирована).

Посмотрите на мою HTML структуру:

<div id="landing"></div> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#landing">Home</a></li> 
     <li><a href="#section1">Section 1</a></li> 
     <li><a href="#section2">Section 2</a></li> 
     <li><a href="#section3">Section 3</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 
<div id="section1"></div> 
<div id="section2"></div> 
<div id="section3"></div> 

для обеспечения я использую следующий JavaScript, что NavBar прилипает к верхней части страницы после прокрутки вниз:

function init() { 
    nh = 50; // navbar height 
    sh = $(window).height(); 
    ih = sh-nh;    
    $("#landing").css('height', ih+'px'); 
} 

function navbarState() { 
    if ($(window).scrollTop() > ih) { 
     $('.navbar').addClass('navbar-fixed-top'); 
     } else { 
     $('.navbar').removeClass('navbar-fixed-top'); 
     } 
} 

init(); 
navbarState(); 

$(window).on('load scroll resize orientationchange', function() { 
    init(); 
    navbarState(); 
}); 

One может заметить, что повторное нажатие первой привязной связи вызывает эффект подпрыгивания. Как я могу это предотвратить?

Моя цель - прокрутить навигацию к соответствующим якорям, независимо от того, находится ли пользователь на целевой странице или нет.

Answer 1

Почему бы не использовать navbar-fixed-bottom?

Смотрите здесь: https://jsfiddle.net/y7soL4ej/

---

Я добавил упомянутый класс по умолчанию для nav. И Модифицированные мелкие вещи:

CSS

html, body, div#landing { 
    height: 100% 
} 
section, [id*=section] { 
    padding-top: 52px; 
} 

JS

function init() { 
    nh = 50 + 2; // navbar height + 2x border width (top + bottom) 
    sh = $(window).height(); 
    ih = sh-nh;    
    //$("#landing").css('height', ih+'px'); 
} 

function navbarState() { 
    if ($(window).scrollTop() > ih) { 
     $('.navbar').removeClass('navbar-fixed-bottom').addClass('navbar-fixed-top'); 
     } else { 
     $('.navbar').removeClass('navbar-fixed-top').addClass('navbar-fixed-bottom'); 
     } 
} 

init(); 
navbarState(); 

$(window).on('load scroll resize orientationchange', function() { 
    init(); 
    navbarState(); 
}); 

---

нервное поведение: Когда Navbar находится на дне в вашем примере он является частью поток dom - он разделяет посадки div и раздел1 div на высоте. Как только он нажимается, браузер переходит к местоположению, затем навигационная панель устанавливается как фиксированная вверху и больше не является частью потока (оба divs больше не разделены им). Таким образом, секции перемещаются соответственно до посадки с закрытием разрыва. Таким образом, повторное нажатие на один и тот же заголовок секции приведет к дополнительному прыжку, потому что раздел был перепозиционирован из-за посадки div перешел от position:static в position:fixed.

Это дополнительная причина, по которой я рекомендую использовать navbar-fixed-bottom.

---

Update

новая скрипка: https://jsfiddle.net/y7soL4ej/2/

Я удалил .navbar-fixed-bottom из HTML и JS в навигационной панели не должны прыгать снизу вверх. Чтобы сделать его гладким и избежать ранее упомянутого неуклюжего поведения, мне пришлось установить его в абсолютное положение.

некоторые CSS нужно добавить:

div#landing { 
    padding-bottom: 72px; 
    margin-bottom: -72px; 
} 

nav.navbar { 
    position: absolute; 
    left: 0; right: 0; 
} 
nav.navbar.navbar-fixed-top { 
    position: fixed; 
}