CODEWITHSUNDEEP
javascriptcsshtmlscrollsticky
Gemma
Gemma

Reputation: 31

how to remove sticky header and keep it static

I am currently working on this site - http://andersontreesurgery.co.uk/. I used html5 up template and the template already had a sticky header. However when the site is scaled down a gap is created between the header and the banner which looks bad. Also I just dont want the header to move down and always stay at the top on top of everything.

The mobile menu I still like as it slides out, however how do I stop the sticky header without remove any other function?

Thanks,

Gemma

Upvotes: 1

Views: 6586

Answers (1)

Sachin G S
Sachin G S

Reputation: 1318

This would help 

$(function(){
  $(window).scroll(function(){
    var winTop = $(window).scrollTop();
    if(winTop >= 30){
      $("body").addClass("sticky-header");
    }else{
      $("body").removeClass("sticky-header");
    }
  })
})
position:fixed 
z-index:9999

<!-- begin snippet: js hide: false -->

/* For Extra styling try this */
body.sticky-header{
    padding-top: 100px;
    header{
        height: 60px;
        h1{
            @include scale(0);
        }
    }
}

Upvotes: 2

Related Questions