Отзывчивый Фиксированный Нав?

Question

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

Этот эффект встречается во многих одностраничных дизайнах. Например:

http://www.thirdculturestudios.com/

http://kevinmheineman.com/

Любая помощь будет оценена.

Answer 1

Я не знаю, как это сделать в CSS.Обе страницы, на которые вы ссылаетесь, включают динамическое добавление / удаление классов на основе события click.У CSS нет способа динамически добавлять классы.

Если вам интересно, вот как вы можете сделать подсветку ссылки в зависимости от того, щелкнула ли она просто в jQuery:

<div id="container">
    <ul>
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">link 2</a></li>
    </ul>
</div>

var a = $('#container a');
a.click(function() {
    a.removeClass('active'); 
    $(this).addClass('active');
});

http://jsfiddle.net/H5rNM/

Answer 2

Вы можете выполнить переход, используя <a name="resourceName" id="resourceName"> теги привязки. Но для плавной прокрутки к предмету нужен javascript.

Вы просто используете <a href="#resourceName">Text</a>, чтобы просто перейти к нему (не JS World).

Редактировать: уточненная грамматика, так как я попытался перечитать ее и понял, что путаница в том, как я ее написал, будет путать

Answer 3

Вы не можете сделать это без JavaScript, потому что CSS ... ну ... каскады.Работа этих страниц заключается в том, что каждый элемент меню имеет класс .active или аналогичный, который добавляется при щелчке по элементу.

РЕДАКТИРОВАТЬ.(см. здесь) , где вы можете указать функцию, которая выполняется при прокрутке пользователя.В этом случае функция проверит значение scrollTop и сравнит его с offset разделами страницы, а затем добавит класс в соответствующий пункт меню.Вы в правильном направлении.

Answer 4

Нет не обойтись без Javascript.