0

I'm trying to reproduce the behavior of the navigation box that can be seen on this page: http://www.nytimes.com/interactive/2013/10/10/garden/philadelphia-design.html?_r=1

I've been able to stick the box on scroll (using stickOnScroll and making the links highlight (using this trick)... but I'm stuck having the items under each section title expand and collapse as the user scrolls down.

What would be an efficient and lightweight way of doing it?

Community
  • 1
  • 1
romo
  • 3
  • 2

1 Answers1

0

You could use the Bootstrap ScrollSpy or Affix component - much easier!

It's as easy as setting up a nav element like so:

<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>

And then putting your content into section elements:

    <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>

And then finally it's simple as setting the target to the #sidebar:

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

Quickly mocked up example here: http://jsfiddle.net/LRCpp/6/

Docs: http://getbootstrap.com/javascript/

adaam
  • 3,700
  • 7
  • 27
  • 51
  • Thanks @adaam for pointing me to Bootstrap to handle both effects simultaneously. Their doc page is actually using the exact effect I wanted: http://getbootstrap.com/javascript/ The effect I was looking for is just a matter of hiding or showing with CSS .navigator-link>ul had display:block and .navigator-link.active>ul has display:none in my case. For the animations I used http://stackoverflow.com/questions/3331353/transitions-on-the-display-property. Looks good now! Thanks – romo Apr 27 '14 at 16:56