использование jQuery для добавления класса активных элементов навигации, когда соответствующая страница div видна - PullRequest
Новая
       3

использование jQuery для добавления класса активных элементов навигации, когда соответствующая страница div видна

2 голосов
/ 22 апреля 2011

Таким образом, я очень noob jQuery, и я не знаю, возможно ли следующее - по крайней мере, когда я об этом думаю - или как это сделать.

текущая настройка

http://joelglovier.com
Итак, у меня есть одностраничный мини-сайт с фиксированной навигацией вверху экрана.Все (кроме одного) из элементов навигации просто прокручивают пользователя вниз до соответствующего div вниз по странице.У меня все отлично настроено.

Что я хочу сделать ...

Я хочу использовать jQuery, чтобы добавить класс "active" кпривязки элементов списка, когда они расположены над соответствующим элементом div на странице.Предпочтительно он не будет использовать функцию щелчка, так что даже пользователи, которые просто прокручивают страницу вниз, не нажимая на элементы навигации, чтобы получить их, будут испытывать то же самое.Подобно домашней странице phpfog .

Я посмотрел на то, как phpfog.com его настраивает, и насколько я вижу, он использует какой-то тип вычисления с селектором окна, чтобы применить класс, но А) Я не совсем понимаю, что он делает или как построить что-то подобное, и Б) Я не знаю, делают ли они это самым простым способом.

Я написал, что яЯ хочу сделать это простым английским оператором, так как у меня пока нет достаточного мастерства в jQuery, чтобы написать его в синтаксисе:

Если .section-link находится в окне со значением href того же идентификатора, добавьте класс "active"

Так вот код, который у меня есть (Только HTML, CSS не имеет значения, т.к. я уже знаю, как я хочу его стилизовать, просто хочу добавить активный класс в соответствующем месте) : 

<div id="site-nav">

<div class="wrap">

    <ul id="nav-links">

        <li class="section-title-nav top">
            <h4><a href="#jag-home" class="section-link scroll">Home</a></h4>
        </li>

        <li class="section-title-nav skills">
            <h4><a href="#background-section" class="section-link scroll">Background</a></h4>
        </li>

        <li class="section-title-nav projects">
            <h4><a href="#projects-section" class="section-link scroll">Projects</a></h4>
        </li>

        <li class="section-title-nav blog">
            <h4><a href="http://blog.joelglovier.com" class="section-link">Blog</a></h4>
        </li>

        <li class="section-title-nav random">
            <h4><a href="#random-section" class="section-link scroll">Random</a></h4>
        </li>

        <li class="section-title-nav credits">
            <h4><a href="#credits-section" class="section-link scroll">Credits</a></h4>
        </li>

    </ul>

</div>

</div>

И далее вниз по странице,разделы, которые связаны с навигацией, помечены примерно так: 

<div id="random-section" class="main-section wrap clearfix">

    <h2 class="section-title"><span class="bg">Random</span></h2>
    <span class="section-title-border"></span>

    <h2 class="coming-soon">COMING SOON</h2>

</div><!--/#random-section-->

Итак, и советы о том, как этого добиться, или я думаю об этом неправильно, это то, что янаходясь в поиске.Спасибо!

Ответы [ 2 ]

2 голосов
/ 23 апреля 2011

Вот рабочий пример, который я собрал; Я буду первым, кто признает, что его можно улучшить, но он может дать вам достойную отправную точку для работы.

http://jsfiddle.net/nogoodatcoding/KMwhZ/1/

Основная идея состоит в том, чтобы прослушивать scroll события в окне, а затем для каждой навигационной ссылки извлечь значение href и проверить, является ли соответствующий элемент видимым или нет. Если это так, то ссылка выбирается, а ранее выделенный элемент отменяется. Я рано ломаю голову, когда первый видимый раздел найден, вы можете получить немного другое поведение, пройдя весь список.

Мой пример разбивается, когда элементы div достаточно малы в height, поэтому несколько элементов div отображаются при прокрутке страницы до самого дна - в этом случае ссылки на самые низкие элементы div никогда не будут выделены. Но, похоже, это имеет место даже со страницей phpfog, на которую вы ссылались - ссылки для Testimonials и Free Tools никогда не активируются, потому что мой дисплей достаточно высокий, чтобы показывать последние 3 раздела при прокрутке вниз. Обратите внимание, что не будет иметь место, если не прервется раньше - там будет выделен последний видимый раздел. Но тогда вы можете увидеть противоположную проблему - ссылка в верхнем разделе никогда не активируется, поскольку всегда отображается что-то еще.

0 голосов
/ 31 октября 2015 
<script type="text/javascript">
    jQuery(document).ready(function($) {
    var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); 
    $("#navbar li a").each(function() {//alert('dsfgsdgfd');
    if(urlRegExp.test(this.href.replace(/\/$/,''))){
    $(this).addClass("active");}
});`enter code here`
}); 
</script>
...