How can I select an element by its scroll top position

JavaScript
1

I’ve lists of links here in 8 collapsible sections. I want the header/toggler of the section to be sticky or stay in the view port but let the body scroll. when next header come up the previous header should scroll away with its body and next header will stay at the top of page and so on and similar thing for reverse.

Its working fine using CSS property position: sticky but on some browsers its not working .

Now I need to select the element that is at the top of window. and add position: fixed style to it using JS or Jquery.

sharing below code just for understanding otherwise its not working…

$(".collapsible").on('scroll', function(event) {
            if(event.target.offset().top() === $window.scrollTop()) {
                console.log(event.target);
            }
});

Please share with me if you have any solution.

2

Why not use a plugin like this one? https://github.com/stefangabos/Zebra_Accordion

1 Like