javascript - Background-reacting navigation for one page websites

javascript - Background-reacting navigation for one page websites - working script -

May 15, 2014

good morning!

i want share simple script made purposes of company new website. allows make floating navigation bar smoothly changes background.

for it's working jquery. question - possible made in pure css? previous idea make navigation container overflow: hidden , position: absolute + menu position: fixed. worked until realized firefox can't handle combination.

i'm waiting yours ideas :)

here's code , preview:

var nav = $('.nav'),     navheight = nav.height();  // duplicate navigation var navreversed = nav     .clone(true)     .addclass('nav-reversed')     .insertafter(nav);  var navs = $('.nav'),     slides = $('.slide');  /* ... */  // onscroll event $(window).on('scroll resize', function() {     var scrolltop = $(document).scrolltop(),         slide;      // find first visible slide     slides.each(function() {         if ($(this).offset().top > scrolltop)             return false;          slide = $(this);     });      if (slide.length) {         var id = '#' + slide.attr('id'),             slidenext = slide.next('.slide');          var cliptop = clipbottom = 'auto';          if (slide.hasclass('slide-reversed')) {             clipbottom = math.max(slidenext.offset().top - scrolltop, 0);         }         else {             cliptop = navheight;              if (slidenext.length && slidenext.hasclass('slide-reversed')) {                 cliptop = math.min(slidenext.offset().top - scrolltop, cliptop);             }         }          if (cliptop !== 'auto') {             cliptop = math.round(cliptop) + 'px';         }          if (clipbottom !== 'auto') {             clipbottom = math.round(clipbottom) + 'px';         }          navreversed.css('clip', 'rect('+cliptop+',auto,'+clipbottom+',auto)');          /* ... */     } }).trigger('scroll');

full version: http://jsfiddle.net/greenek/nl7fh/

preview