jquery - Fixed Header Issue - addClass doesn't work on page load -


i trying build hidden header has appear once scroll web page below 100px. header contains logo has hidden well. issue on page load hidden same has be, on scroll head appears, logo still missing. if refresh page when below 100px top logo appears , works fine if go on top.

could please explain might reason behind issue not find proper solution.

html

<header>     <a id="logo" href="index.html"></a> </header> 

css

header{     position: fixed;     top: -50px;     left: 80px;     height: 50px;     width: 100%;     background: rgba(255,255,255, 0.9);     z-index:9999;     transition: 0.3s ease-in-out; } header.show{     top:0; }  a#logo{     display: block;     position:absolute;     top: inherit;     left: -80px;     width: 80px;     height: 50px;     background: url('images/logos/logo.svg'); } 

jquery

$(document).ready(function(){     $(window).scroll(function(){         if($('body').scrolltop() > 100){             $("header").addclass('show');         }         else{             $("header").removeclass('show')         }      }); }); 

i don't think given answers correct :)

the problem inherit value of a#logo top

a#logo{     display: block;     position:absolute;     top: 0; /*make 0, , work*/     left: -80px;     width: 80px;     height: 50px;     background: url('images/logos/logo.svg'); } 

Comments

Popular posts from this blog

user interface - how to replace an ongoing process of image capture from another process call over the same ImageLabel in python's GUI TKinter -

javascript - Using jquery append to add option values into a select element not working -

javascript - Restarting Supervisor and effect on FlaskSocketIO -