Sticky header on a specific scroll-point

I want to achieve a result, where my headers will go to the top of the page, when an actor scrolls past a certain point of the DOM, but my code doesn’t seem to work… I tried to refactor this code from this example:
http://jsfiddle.net/ax3uyk7k/
Right now nothing is happening at all…

//Jquery
var  mn = $(".headers");
                mns = ".headers-scrolled";
                hdr = $(".titel").height();
                    
                $(window).scroll(function() {
                    if( $(this).scrollTop() > hdr ) {
                    mn.addClass(mns);
                    } else {
                    mn.removeClass(mns);
                    }
                    });

//

HTML

<div id="wrap-scroll">

                        <div class="headers">
                            <h1 class="plan" >Plan</h1>
                            <h1 class="create">Create</h1>
                            <h1 class="share">Share</h1>

                        </div>
                            
                        <main>
                        <div id="textContainer">
                        
                            
                            </br>
                            </br>
                            </br>
                             
                            BLALBLBALALLALALAALAL. BLALBLBALALLALALAALAL. BLALBLBALALLALALAALAL. 
 BLALBLBALALLALALAALAL. BLALBLBALALLALALAALAL. BLALBLBALALLALALAALAL. BLALBLBALALLALALAALAL. BLALBLBALALLALALAALAL. BLALBLBALALLALALAALAL. 
 BLALBLBALALLALALAALAL. BLALBLBALALLALALAALAL.

</div>
</main>
</div>


//CSS
.create{
    padding-left: 300px;
    padding-right: 300px;
    }

.headers {
    display: inline-flex;
    text-align: center;
}

.headers-scrolled {
    top:0;
    position:fixed;
    width:100%;
}

if open the fiddle i get:

i then scroll down, the header will stick to the top:

seems to be working fine?

The fiddle code is not mine, tried tried to refactor his code to mine, because I wanted the same result with my #headers, but mine doesn’t work… his does tho

here:

hdr = $(".titel").height();

this will select an element with class titel, which you do not have?

Is there enough elements below the header you want to fixate to scroll down?

There are enough elements for sure. You are right about the titel, I was missing that one… but my headers er still not sticking to the top :confused:

but it will only stick to the top, if you can scroll down enough. Or just make a single element and give it a massive height

Please make a fiddle with your code, this will make things a lot easier

1 Like

No need, I figured it out now! Thanks!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.