javascript - Making parts of page not scrollable and making scroll-then-fixed to work on body larger then 100% -

i'm complete noob in javascript i'm copying things internet portfolio project have semester , i'm stuck thing not working

var elementposition = $('#header_nav').offset();  $(window).scroll(function () { if ($(window).scrolltop() > elementposition.top) {         $('#header_nav').css('position', 'fixed').css('top', '0');     } else {         $('#header_nav').css('position', 'static');     }     }); 

when page 100% wide piece of code worked charm have different ideas webpage now, decided stretch it's 300% width of browser window. , centered header , sections in middle of 300% looks this:

http://postimg.org/image/g7m9hj425/full/

i've managed disable middle mouse button scroll piece of code:

$('body').mousedown(function(e){if(e.button==1)return false}); 

but, still can't make scroll-then-fixed thing work.

thanks in advance, hope have been clear enough :)

have tried box sizing? here link of other people helping question. http://w3schools.invisionzone.com/index.php?showtopic=35015\ hope helps.