oblador / angular-scroll

Scrollspy, animated scrollTo and scroll events for angular.js
http://oblador.github.io/angular-scroll/
MIT License
1.48k stars 235 forks source link

Sub sections like tocify #108

Open chachou29 opened 9 years ago

chachou29 commented 9 years ago

Hello, Thanks for this lib. Works great ! I look for subsections like http://gregfranko.com/jquery.tocify.js/ Could angular-scroll do that ? Thank you, Philippe

oblador commented 9 years ago

Hi,

If you use the du-spy-context directive it should be possible with the following markup (that way both the parent and children may have the active class simultaneously):

<ul>
  <li>
    <a href="#section-1" du-smooth-scroll du-scrollspy>Section 1</a>
    <ul du-spy-context="section-1">
      <li><a href="#section-1-1" du-smooth-scroll du-scrollspy>Sub Section 1</a></li>
      <li><a href="#section-1-2" du-smooth-scroll du-scrollspy>Sub Section 2</a></li>
      <li><a href="#section-1-3" du-smooth-scroll du-scrollspy>Sub Section 3</a></li>
      <li><a href="#section-1-4" du-smooth-scroll du-scrollspy>Sub Section 4</a></li>
    </ul>
  </li>
  <li><a href="#section-2" du-smooth-scroll du-scrollspy>Section 2</a></li>
  <li><a href="#section-3" du-smooth-scroll du-scrollspy>Section 3</a></li>
</ul>
chachou29 commented 9 years ago

Hello, Thank you for this quick answer. du-spy-context is what i need. But there are two issues : 1 - Subsections are not handling duScrollOffset See http://plnkr.co/edit/C9CcAsWI6K0qOYHDoADs?p=preview It's possible ti highlight Section 2 and Subsection 1-2. The problem does not occur if you don't set duScrollOffset 2 - When you scroll to the end, Subsection 1-2 and Section 3 are highlighted.

Did I something wrong ? Philippe

oblador commented 9 years ago

Hi,

  1. It actually does, but the spies only use it for activation not deactivation. Will look into changing this. It's also possible to expand/collapse sections by listening to scroll spy events.
  2. Yes noticed that as well. Made the bottom spy configurable and off by default. If you check out the repo and build it should work (will publish a release eventually)
oblador commented 9 years ago

No 2 is solved as of 0.7.0.