javascript - JQuery fixed top nav, variables change on resize, disabled on mobile devices -

i've been struggling jquery code working on new site. involves fixing navigation div top of window once scroll point has been passed.

there 2 divs change height when page resized , whole action should happen when @media (min-width: 768px).

this basic structure @ top of site:

<div id="x-topbar-wrap"></div> <div id="nav-top-wrap">     <div id="nav-top-inner"></div> </div> <div class="x-slider-container"></div> 

i want create 2 variables, update window resized:

var topbarheight = $('#x-topbar-wrap').outerheight(); var navtopheight = $('#nav-top-wrap').outerheight(); 

...and use them when window scrolled:

$(window).scroll(function() {     if ($(this).scrolltop() >= topbarheight) {         $('#nav-top-inner').addclass('fixed max');         $('.x-slider-container').css('margin-top', navtopheight + 'px');     } else {         $('#nav-top-inner').removeclass('fixed max');         $('.x-slider-container').css('margin-top', '0px');     } }); 

the class 'fixed' follows , therefore disabled on mobile devices.

@media (min-width: 768px) {     #nav-top-inner.fixed {         position: fixed;         top: 0;         z-index:1050;     } } 

the margin-top on .x-slider-container should disabled on mobile devices, because size variable trying media query check this:

if ($("#nav-top-inner").css('position') == 'fixed') {     $('.x-slider-container').css('margin-top', navtopheight + 'px'); } else {     $('.x-slider-container').css('margin-top', '0px'); } 

i appreciate pulling together, particularly 2 variables update page resizes.

i've got work without resizing, experiencing different results between chrome , safari weirdly.

and here website: http://www.pricestudios.co.uk/

thank you,

sam

this ended , seems working well. thoughts / recommendations on cleaning appreciated.

jquery(document).ready(function($) {      settimeout(function(){          var topbarheight, navtopheight;          function setsizes() {             topbarheight = $('#x-topbar-wrap').outerheight();             navtopheight = $('#nav-top-wrap').outerheight();         }          setsizes();          $(window).resize(setsizes);          $(window).bind('scroll', function() {             if ($(window).scrolltop() >= topbarheight) {                 $('#nav-top-inner').addclass('fixed max');                 if ($("#nav-top-inner").css('position') == 'fixed') {                     $('.x-slider-container').css('margin-top',                         navtopheight + 'px');                 } else {                     $('.x-slider-container').css('margin-top',                         '0px');                 }             } else {                 $('#nav-top-inner').removeclass('fixed max');                 $('.x-slider-container').css('margin-top', '0px');             }         });     },1000); });