Is there anyway to provide offset?

[raviayadav]

Hi. great work. Is there any way we can add some top offset to the divs being monitored?

[edoparearyee]

@raviayadav unfortunately not at the moment but it is something we can look to add in the future. I will try and look into this when I get a chance.

[raviayadav]

okay, thanks

[edoparearyee]

I'm going to reopen this issue until we add this feature so we don't forget it.

[Nexeuz]

+1

[Asheq096]

You can provide an offset by adding the following:

  :target:before {
    content:"";
    display:block;
    height:64px; /* fixed header height*/
    margin:-64px 0 0; /* negative fixed header height */
  }

https://stackoverflow.com/a/28824157

EDIT:
Ahh I see, the above will fix the issue of it scrolling to the wrong location but it does not address the issue of the scrollspy not properly monitoring the element. This feature would be very helpful. +1!

[burzum619]

This would be an excellent feature. +1. Currently when scrolling down to the content, I'm always left on the section above in my "table of contents"

[tratohecho3]

If you see there is an error in the library because you need one more scroll to active the class. However I found a solution.

To the div where you want to go: Add a class called offset
then in your css:
.offset:before {
display: block;
content: " ";
margin-top: 5px; /* Give negative margin of your fixed element */
visibility: hidden;
}

You should play with the margin top with other values to get a specific result

[rafaneri]

@tratohecho3, could you post an example?

[maxmumford]

Another way to offset the <sn-scroll-spy-section> component is to wrap it in a custom component and position absolute the <sn-scroll-spy-section> N pixels upwards to force the offset. That way the scroll spy active class will be added N pixels before it arrives at the top of your screen:

Wrapper component template:

<sn-scroll-spy-section 
    class="scrollspy-trigger"
    ...
</sn-scroll-spy-section>
<ng-content></ng-content>

Wrapper component scss:

:host {
  display: block;
  position: relative;
}

.scrollspy-trigger {
  position: absolute;
  top: -60px;
  bottom: -60px;
  left: 0px;
  right: 0px;
  pointer-events: none;
}