Closed herrKlein closed 6 years ago
Almost got it. I had an error with assigning the id, it contains a # has sign. But I can't click the anchors to jump to the corresponding section.
<ul class="nav" snScrollSpy id="foo">
<li
*ngFor="let color of colors;let i = index"
class="nav-item"><a snScrollSpyItem for="foo" class="nav-link" [href]="'#section' + i">{{color}}</a></li>
</ul>
<sn-scroll-spy-section
*ngFor="let color of colors;let i = index"
[id]="'section' + i" for="foo" >
<section class="section">{{color}}</section>
</sn-scroll-spy-section>
Hi @herrKlein, glad you were able to get it working, unfortunately clicking to scroll to a section is not a feature of this library as of now. It could be something that we might look to add in the future though if someone submits a PR or issue for it.
In the meantime I would recommend using the browser's native scrollTo
function combined with this polyfill for smooth scrolling.
I can't get generated items to work. It doesn't produce an error, bu none of the scrollspyitems comes active.
with this as a property in the component class :
colors: Array<string> = ['#ffffe0', '#f2f6df', '#e9edd8', '#e5e3cd', '#e5d8be', '#e8cdad', '#ecc09d', '#f1b28d', '#f5a480', '#fa9378', '#fd8374', '#ff7175', '#ff5d7b', '#ff4484', '#ff1493'];
It probably has something to do with setting the href or id dynamicly.