Приватное меню навигации прокрутки

Question

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

Im этим руководством callmenick

Вот воспроизведение этого, jsfiddle

<nav> 
<ul> 
    <li><a href="#overview">Overview</a></li> <- when any click link, and then click again, there's some action happen. *bugs?* 
    <li><a href="#tech-spec">Tech Spec</a></li> 
    <li><a href="#support">Support</a></li> 
</ul> 
</nav> 

Пожалуйста, нужно посоветовать для этого.

Спасибо.

Answer 1

Что вам нужно сделать, это добавить свой раздел отсутствует «Купить» и в вашей навигации добавить HREF в ссылку, как:

<nav> 
    <ul> 
     <li><a href="#overview">Overview</a></li> 
     <li><a href="#tech-spec">Tech Spec</a></li> 
     <li><a href="#support">Support</a></li> 
     <li><a href="#buy">Buy</a></li> <!-- You are missing your href attribute here --> 
    </ul> 
    </nav> 

Все остальное, кажется, работает хорошо.

Answer 2

Я не вижу проблемы на своей машине, но к этой функции можно подойти по-другому. Смотрите мой пример ниже, это может решить проблему

---

1. Добавить класс якорь
2. Добавить атрибутивные данные
3. сделать глобальную функцию, которая прокручивает до определенной точки

Так, например

<div id="button-name"></div> 

будет

<div id="button-name" class="scrollAnchor" data-anchor-dest="#section-more-info"></div> 

Теперь есть действие JavaScript требуется, это один читает данные якорь-Dest атрибут и свитки к нему.

$(".scrollAnchor").click(function(e){ 
    e.preventDefault(); 
    anchorDestination = $(this).data("anchor-dest"); 
    smoothScrollTo(anchorDestination); 
}); 

function smoothScrollTo(element) 
{ 
    $("html, body").stop().animate({ 
     scrollTop: $(element).offset().top 
    }, 1000); 
} 

Теперь обычный вопрос, насколько он совместим? This compatible, я сам тестировал это в IE9, и он работает.

Этот ответ может быть больше разборки, чем исправить, но я надеюсь, что это помогает

Answer 3

Теперь я понимаю,

Проблема в том, что фиксированной нав не является частью документ поток больше. Поэтому он не резервирует высота. Или, другими словами, остальные элементы больше не знают его. Так же, как display: none;

---

Вы должны найти способ, чтобы раздвинуть элементы вниз по высоте неподвижной нав, но только если нав фиксирована.

Есть несколько способов сделать это, но это зависит от компоновки. Первый способ, который приходит на ум, применяет padding-top: ?px; к # product-nav, через JS, как только фиксированное применяется к nav.

редактировать: https://jsfiddle.net/ju648br4/4/