Sticky header on a specific scroll-point

#1

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%;
}
#2

if open the fiddle i get:

Screenshot_2018-02-27_13-29-44
Screenshot_2018-02-27_13-29-44.png842x438 27.9 KB

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

Screenshot_2018-02-27_13-29-59
Screenshot_2018-02-27_13-29-59.png833x443 5.82 KB

seems to be working fine?

#3

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

#4

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?

#5

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:

#6

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

#7

No need, I figured it out now! Thanks!

#8

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