How to maintain fixed header without height change when using scroll

Question

How to maintain fixed header without height change when using scroll

Navigation

#1 by (1 votes)

1

In my page I have a fixed header at the top, but when I roll the page and return to the top the height of the header changes, I made a few attempts, like deleting that line, I deleted the div.hidden-header because as it's a fixed height, it's pushing the header.clearfix down

<div class="hidden-header"></div>

The page can be seen here: Project

html5 css

asked by anonymous 19.11.2015 / 19:07

1 answer

Condition to add and remove attributes of an element? Java generate JSON from a string

score 1 · Accepted Answer

Dear, inside your script.js file there is a function scrollPage() , you are responsible for changing your header, below the function.

function scrollPage() {
    var sy = scrollY();
    if ( sy >= changeHeaderOn ) {
        $('.top-bar').slideUp(300);
        $("header").addClass("fixed-header");
        $('.navbar-brand').css({ 'padding-top' : 19 + "px", 'padding-bottom' : 19 + "px" });

        if (/iPhone|iPod|BlackBerry/i.test(navigator.userAgent) || $(window).width() < 479 ){
            $('.navbar-default .navbar-nav > li > a').css({ 'padding-top' : 0 + "px", 'padding-bottom' : 0 + "px" })
        }else{
            $('.navbar-default .navbar-nav > li > a').css({ 'padding-top' : 20 + "px", 'padding-bottom' : 20 + "px" })
            $('.search-side').css({ 'margin-top' : -7 + "px" });
        };

    }
    else {
        $('.top-bar').slideDown(300);
        $("header").removeClass("fixed-header");
        $('.navbar-brand').css({ 'padding-top' : 27 + "px", 'padding-bottom' : 27 + "px" });

        if (/iPhone|iPod|BlackBerry/i.test(navigator.userAgent) || $(window).width() < 479 ){
            $('.navbar-default .navbar-nav > li > a').css({ 'padding-top' : 0 + "px", 'padding-bottom' : 0 + "px" })
        }else{
            $('.navbar-default .navbar-nav > li > a').css({ 'padding-top' : 28 + "px", 'padding-bottom' : 28 + "px" })
            $('.search-side').css({ 'margin-top' : 0  + "px" });
        };

    }
    didScroll = false;
}

So you can comment the function, if there are any obstacles or simply change these lines:

$('.search-side').css({ 'margin-top' : -7 + "px" });

for

$('.search-side').css({ 'margin-top' : 0 + "px" });

and

$('.navbar-default .navbar-nav > li > a').css({ 'padding-top' : 28 + "px", 'padding-bottom' : 28 + "px" })

for

$('.navbar-default .navbar-nav > li > a').css({ 'padding-top' : 0 + "px", 'padding-bottom' : 0 + "px" })

The alternative of changing values, I tested replacing the code with the Chrome console on your site and worked.