CODEWITHSUNDEEP
javascriptcssangularjshtml
Sohail Faruqui
Sohail Faruqui

Reputation: 452

Fix header with variable height on page scroll

I am trying to learn CSS and building html pages and a bit new in this field. I wanna build a page with fix header so that when I scroll the page it doesn't disappear however its height will change on scrolling down, so for example if i start scrolling down it shrinks its height or if I start scrolling up with high speed it will show the complete header(scrolling up slowly will not show complete header until i reach to top of page). I have seen this feature in may website for example http://www.flipkart.com/

Upvotes: 0

Views: 810

Answers (2)

izorgor
izorgor

Reputation: 138

First, you need to add/remove a class to your header on scrolling using jquery:

$(window).on("scroll", function () {
        if ($(this).scrollTop() > 0) {
            $("header").addClass("stickyHeader");
        }
        else {
            $("header").removeClass("stickyHeader");
        }
    });

and in css you can add something like this:

.stickyHeader{position:fixed;top:0;height:50px}

and for your normal header state you can put something like:

header{height:100px}

Basically, when u add the class on scrolling, you can manipulate via css with it

Upvotes: 1

Errorpro
Errorpro

Reputation: 2423

You should use position: fixed; top: 0 if you want element to be fixed always. If you want to change size or smth other when user scrolls to some element on page you need use javascript.

Upvotes: 0

Related Questions