Загрузочный лоток: анкеры и верхний край/отступы

Я использую Bootstrap с глобальной навигационной панелью, прикрепленной к верхней части тела страницы.

    <div class="navbar navbar-fixed-top navbar-inverse">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="/">MyBrand</a>
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li><a href="#>Page 1</li>
                        <li><a href="#>Page 2</li>
                        <li><a href="#>Page 3</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

Я добавил поле на 40 пикселей поверх тела, чтобы верхняя часть страницы не лежала на панели навигации.

body {
    background-color: #f5f5f5;
    position: relative;
    margin-top: 40px;
}

До сих пор все работает нормально. Я также использую внутренние привязки, чтобы упростить навигацию внутри страницы, используя те же механизмы, которые Twitter использовал с аффикс-компонентом в документации Bootstrap, что позволяет пользователю перейти к различным разделам на странице (см. http://twitter.github.com/bootstrap/getting-started.html)

<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>

[...]

<section id="section1">
    [...]
    [...]
    [...]
</section
<section id="section2">
    [...]
    [...]
    [...]
</section
<section id="section3">
    [...]
    [...]
    [...]
</section>

Моя проблема в том, когда пользователь нажимает, браузер привязывает цель к самой верхней части экрана, содержимое исчезает под навигационной панелью. Я заметил, что Twitter использовал трюк, целевые теги <section> включают "padding-top: 30px;", ближайший <h1> включает "margin-top: 10px;"; CSS, чтобы текст отображался ровно на 40 пикселей ниже верхней части экрана.

Я не могу позволить мне "потерять" 40 пикселей между каждой секцией, мой дисплей должен оставаться компактным. Мой вопрос: есть ли способ, чтобы внутренние якоря не придерживались самой верхней части экрана, а оставались в стороне от верхней части экрана произвольной длины?

Ответ 1

Наконец, я понял, как легко решить эту проблему:

body {
    background-color: #f5f5f5;
    position: relative;
    margin-top: 40px;
}

section {
    padding-top:40px;
    margin-top:-40px;
}

Это означает, что в верхней части тела добавляется край 40px, добавление 40px добавляется поверх секций, добавляется отрицательная граница в 40 пикселей, чтобы продвигать свои соответствующие ожидаемые местоположения, вводя невидимый запас, когда браузер обращает дисплей в секцию после щелчка якоря.

Надеюсь на эту помощь.

Ответ 2

Чтобы прокрутить ее до нужной позиции и правильно выбрать элемент меню при прокрутке страницы, вам нужно установить padding-top: 40px; на якорь и установить margin-bottom: -40px; на предыдущем брате якоря.

Вы можете добиться этого с помощью фрагмента JS, который найдет элементы из навигационного меню и применит изменения стиля.

$("header .nav a[href!=#]").each(function(){
    $($(this).attr("href")).css("padding-top", "40px").prev().css("margin-bottom", "-40px");
});

Ответ 3

Если ваше приложение может применять javascript, то следующий javascript тоже хорошо работает:

function maybeScrollToHash() {
    if (window.location.hash && $(window.location.hash).length) {
        var newTop = $(window.location.hash).offset().top - $('.navbar-fixed-top').height() + parseInt($('body').css('padding-top'),10);
        $(window).scrollTop(newTop);
    }
}

$(window).bind('hashchange', function() {
maybeScrollToHash();
});

maybeScrollToHash();

Это небольшая модификация ответа, найденного здесь: https://github.com/twbs/bootstrap/issues/193

Единственное различие заключается в том, что приведенный выше код работает в классе navbar-fixed-top.