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

Pass DB Connection parameters to a Kettle a.k.a PDI table Input step dynamically from Excel -

multithreading - PhantomJS-Node in a for Loop -

c++ - MATLAB .m file to .mex file using Matlab Compiler -