Make current h1/h2 sticky with Javascript

Question

I'd like to make a long website with lots of text more convinient by making the h1 or h2 element that would have just gone out of view (when scrolling down) sticky at the top until the next headline is about to go out of view and become sticky.

I believe I've seen this on some websites, but I don't know how to call it and can't find an example.

I'm using Bootstrap and JQuery, so a solution that works with either of them would be perfect.

have you tried anything yet? sounds like you can try position: sticky — Chris Li, Mar 21 '19 at 14:46
`Make current h1/h2 sticky` , `but I don't know how to call it` . Well, read these 2 sentences again :) — Mihai T, Mar 21 '19 at 14:53
Already answered here: https://stackoverflow.com/q/51045863/10678978 — coops, Mar 21 '19 at 14:55

score 0 · Answer 1 · edited May 24 '23 at 17:18

$(window).on("scroll",function(){
/*Check if window scroll Top reaches menu position */
    if ($(window).scrollTop() >= 100) {
        $('div.menu-class').addClass('fixed');
        }
    else {
       $('div.header').removeClass('fixed');
        
    }
});

Or You can check if the menu element top position equals window scroll top.

 var window_top_position = $(window).scrollTop();
 var menuElement = $('.menu-class');
 var Menu_top_position = $menuElement.offset().top;

Then check the condition and add 'fixed' if condition satisfies, else remove 'fixed' class

Dont forget to add CSS for fixed.

.fixed{
position:fixed;
top:0;
}

it's not about the menu element. It's about section titles. And this can be done with css — Mihai T, Mar 21 '19 at 15:46

Make current h1/h2 sticky with Javascript

1 Answers1