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


Tags: javascript,jquery,html,css

Problem :

This question already has an answer here:

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.



Solution :

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();
    }
});

    CSS Howto..

    How to view Google Maps in “print” mode?

    CSS Speech bubbles: How to update the tip position based on where the bubble is

    How to create border corner spacing in CSS

    How do I evenly space these links within my navbar div?

    How can I modify my four quadrants to allow some “breathing room” between them (HTML/CSS)?

    How to use toggle css classes on an element onclick?

    How to make custom layout grids more semantic? [closed]

    How to persist CSS changes with Chrome Developer Tools

    How to move images in a grid box?

    How to prevent mobile device to resize and use proper css file

    CSS - How to have 100% height element inside of parent

    How to dynamically add a CSS class and implement its style in JavaScript

    Foundation Framework: How can I get multiple links in a mobile drop-down to be horizontally aligned and not stacked?

    How to reference CSS children [duplicate]

    How to Stop Overriding of Bootstrap Css Styles

    How to prevent one table from obeying CSS rule

    how to disable one header among of multiple headers in jQuery table sorter

    How to use images for check boxes using CSS or may be Javascript?

    How to identify unused css definitions [closed]

    How to align div blocks to be aligned in grid?

    How to prevent “jerking” of page in browser

    How to define a CSS fontface?

    How to give Internet Explorer different CSS lines?

    How to use the float:left property in CSS without having the trouble I have?

    How to create a table WITHOUT alternating row colors when using Blueprint CSS framework?

    How to edit CSS so button appears on same line as input field?

    How to position a button to be always a certain distance from the screen in css? [closed]

    How can one fix a CSS3 graident background when using a box for content?

    Maintain border-spacing when using show() on a display:table element hidden with display:none

    How to make website change its layout of image/text when the browser dimensions are changed?