jQuery - развернуть элементы в окне навигации при прокрутке

Question

jQuery - развернуть элементы в окне навигации при прокрутке

0

Я пытаюсь воспроизвести поведение навигационного блока, которое можно увидеть на этой странице: http://www.nytimes.com/interactive/2013/10/10/garden/philadelphia-design.html?_r=1

Я смог наклеить окно на прокрутку (используя stickOnScroll и выделяя ссылки (используя этот трюк)... но я застрял, когда элементы под заголовком каждого раздела расширяются и сворачиваются по мере прокрутки пользователя.

Какой был бы эффективный и легкий способ сделать это?

romo 27 апр. 2014, в 02:24

Источник

Теги:

jquery

css

1 ответ

Ещё вопросы

adaam · Accepted Answer · 2014-04-26T23-02-00.000Z

Вы можете использовать компонент Bootstrap ScrollSpy или Affix - намного проще!

Это так же просто, как настройка элемента nav так:

<nav class="col-xs-3 bs-docs-sidebar hidden-print">
    <ul class="nav nav-stacked bs-docs-sidenav fixed" id="sidebar">
        <li>
            <a href="#Group1">Content 1</a>
            <ul class="nav nav-stacked" id="sidebar">
                <li><a href="#Group1Sub1">Sub-Group 1</a></li>
                <li><a href="#Group1Sub2">Sub-Group 2</a></li>
            </ul>
        </li>
    </ul>
</nav>

Затем добавьте контент в элементы section:

    <div class="col-xs-9">
            <section id="Group1" class="group">
                <h3>Group 1</h3>
                <div id="Group1Sub1" class="subgroup">
                    <h4>Group 1 Sub 1</h4>
                </div>
                <div id="Group1Sub2" class="subgroup">
                    <h4>Group 1 Sub 2</h4>
                </div>
            </section>
</div>

И, наконец, это просто, как установка цели на #sidebar:

$('body').scrollspy({
    target: '#sidebar'
});

Быстро издевается над примером: http://jsfiddle.net/LRCpp/6/

Документы: http://getbootstrap.com/javascript/

Спасибо @adaam за указание на Bootstrap для одновременной обработки обоих эффектов. Их документная страница фактически использует именно тот эффект, который я хотел: getbootstrap.com/javascript Эффект, который я искал, это просто вопрос скрытия или отображения с помощью CSS .navigator-link> ul имел display: block и .navigator-link.active > У ul есть дисплей: нет в моем случае. Для анимации я использовал stackoverflow.com/questions/3331353/… . Хорошо выглядит сейчас! Спасибо