How to create a header that changes as you scroll down the page? [duplicate]

Question

I want to create a navigation bar that changes as the page is scrolled down similar to the one they have on techcrunch.com

I don't only want to make a sticky header that stays on top, I know how to do that in CSS. But I also want to change its height and the styling of objects nested inside it after scrolling to a certain point.

I have made some research already and most people say it should be done using a .scroll function or something like that in jQuery, but I didn't find a full explanation on how to do it. I'm not very familiar with jQuery or Javascript to be honest.

All the answers I found for similar questions will not allow me to edit or change the nested content within the header, only change the styling of the header itself. I'd be grateful if someone can explain the process for me in some details. I really want to learn how can to do it, not just copying some code and pasting it into my website.

Answer 1

Here is a generic solution.

This involves having multiple headers (which can have totally different content inside) from which you selectively display one depending on the scroll position. Each header element will have a data-visible-range attribute that defines the min and max scroll positions when it should be displayed.

Demo: http://jsfiddle.net/cydfh2s6/1/

HTML

<div class="header header-1" data-visible-range="0-100">Header 1</div>
<div class="header header-2" data-visible-range="101-500">Header 2</div>
<div class="header header-3" data-visible-range="501-">Header 3</div>
<div class="body">BODY</div>

CSS

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
}
.header-1 {
    background-color: yellow;
    display: block; /* header 1 is visible by default */
}
.header-2 {
    background-color: red;
}
.header-3 {
    background-color: green;
}
.body {
    padding-top: 50px;
    height: 2000px;   
}

JS

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    var headerToDisplay = false;
    $('.header[data-visible-range]').each(function() {
        var range = $(this).data('visible-range').split('-');
        range[0] = range[0] ? parseInt(range[0], 10) : 0;
        range[1] = range[1] ? parseInt(range[1], 10) : $(document).height();
        if(scrollTop >= range[0] && scrollTop <= range[1]) {
            headerToDisplay = $(this);
            return false;
        }
    });
    if(headerToDisplay && !headerToDisplay.is(':visible')) {
        $('.header[data-visible-range]').hide();
        headerToDisplay.show();
    }
});

Answer 2

In this example i am adding class on scroll

See this example: http://jsfiddle.net/kevalbhatt18/twn3gs75/

hear we can listen scroll event like click,so when you scroll it will go in $(window).scroll(function() { ----Call---- }); Now in this function(){} will check how much it will scrolled 1 or 2 or 3 ... etc so depending upon that will apply condition in my code i checked if user scrolled > 1 then apply css.

$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('header').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
  }
});