Jquery move element on scroll?

Question

Example: I have menu horisontally (on header), then if I scroll page down (about >100px from top) the menu (horisontal) will move to left side of browser (vertical) and fixed there...

Any help?

Answer 1

Try this:

Here is working jsFiddle and source.

$(window).scroll(function() {

   var headerH = $('.header').outerHeight(true);
   //this will calculate header's full height, with borders, margins, paddings
   var scrollTopVal = $(this).scrollTop();
    if ( scrollTopVal > headerH ) {
        $('#subnav').css({'position':'fixed','top' :'0px'});
    } else {
        $('#subnav').css({'position':'static','top':'0px'});
    }

   var scrollLeftVal = $(this).scrollLeft();
   if ( scrollLeftVal > 1 ) { alert('i scrolled to the left'); }
});