javascript - Add on scroll header effect / transition with position property -


I have a header in which position on loading: full to fix it on a particular scroll This is working .. ..

But the problem is how do I use the header effect with the position: fixed property (i.e. Along with)

code:

css

  .iaw-header {status: absoulte}   

js: < / P>

  {If (jQuery (window) .scrollTop ()> = 700) {jQuery ('.a.w.-header'). CSS ('position', 'fixed'); }); }    

HTML

  & lt; Div id = "title" & gt; Here's the header text. & Lt; / Div & gt;   

CSS

  .header {status: absolute; }   

JS

  if (jQuery (window) .scrollTop ()> = 700) {$ ('# header'). CSS ('top', '-300px'); $ ('# Header') CSS ('position', 'fixed'); $ ('# Header') Animate ({top: 0}, 1000); } And {$ ('top', 0); $ ('# Header') ({Top: '300 px'}, 1000, function () {$ ('# header'). '). CSS ('position', 'complete');); }   

So when the site loads (in css), in the header top: -300px; , and when the user scrolls up, you have the transition (or set)) to the header's top 0 px, so it scrolls down from the top.

Comments

Popular posts from this blog

python - Writing Greek in matplotlib labels, titles -

c# - LINQ to Entities does not recognize the method 'Int32 IndexOf(System.String, System.StringComparison)' method -

Pygame memory leak with transform.flip -