Swapping a header image on scroll with JQuery -


i have simple question (i hope). have site sticky navigation bar @ top. i'm trying swap header image when you're on top of page it's full image, when start scrolling switches image bit of fade transition.

it feels should work, doesn't. i'm not programmer i'm sorry if dumb , appreciate assistance:

<script language="javascript" type="text/javascript"> $(function(){     $(window).scroll(function(){     if($(this).scrolltop() > 100) {         $('.headerimg').fadeout('slow');         $('.headerimg')             .css({'background-image: url(path small logo)'})     }     if($(this).scrolltop() < 100) {         $('.headerimg')             .css({'background-image: url(path full logo)'})     }     }); }); </script> 

then in main html have image being pulled in via plain div

<div class="headerimg"></div> 

ok, first of all, have errors in code, won't work if doing right:

{'background-image: url(path small logo)'} 

should be:

{'background-image': 'url(path small logo)'} 

since passing object jquery css function. also, may want add fixed property keep header on top. trying achieve known sticky header, , can find plenty examples on web. made litte fiddle minimal example of code, can (should) improved better performance , cross-browser:

http://jsfiddle.net/tomsarduy/38hun91z/

note: see problem in browser console:

  • windows (ctrl+shift+j)
  • mac (cm+shift+i)

Comments

Popular posts from this blog

python - Healpy: From Data to Healpix map -

c - Bitwise operation with (signed) enum value -

xslt - Unnest parent nodes by child node -