i have created sticky navigation , works fine. however, want sticky navigation fires or run when browser lower or equal 770px.
so far, code
$j = jquery.noconflict(); $j(document).ready(function() { var navoffset = $j(".main-nav").offset().top; var wi = $j(window).width(); var sticky; $j(".responsive-icon").wrapinner('<div class="value"></div>'); $j(".main-nav").wrap('<div class="nav-placeholder"></div>'); $j(".nav-placeholder").height($j(".main-nav").outerheight()); function stickyfunction() { /*sticky navigation function*/ sticky = $j(window).scroll(function() { var scrollpos = $j(window).scrolltop(); if (scrollpos >= navoffset) { $j(".main-nav").attr("id", "fixed-menu"); } else { $j(".main-nav").removeattr("id"); } }); return sticky; } if(wi <= 770) { /* suppose fires if browser lower 770px */ stickyfunction(); } $j(window).resize(function() { /*suppose fires if browser resize*/ if(wi <= 770) { stickyfunction(); } }); }); how call stickyfunction run when browser width meets condition?
thanks!
simply use sticky scroll event , try use scroll event inside window resize event function not fired in resize window .. use this
/*sticky navigation function*/ var stickyfunction= (function() { var scrollpos = $j(window).scrolltop(); if (scrollpos >= navoffset) { $j(".main-nav").attr("id", "fixed-menu"); } else { $j(".main-nav").removeattr("id"); } }); instead of
function stickyfunction() { /*sticky navigation function*/ sticky = $j(window).scroll(function() { var scrollpos = $j(window).scrolltop(); if (scrollpos >= navoffset) { $j(".main-nav").attr("id", "fixed-menu"); } else { $j(".main-nav").removeattr("id"); } }); return sticky; } and make event window scroll
$j(window).on('scroll', stickyfunction); and in resize event
$j(window).on('resize',function() { /*suppose fires if browser resize*/ wi = $j(window).width(); if(wi <= 770) { stickyfunction(); } }); 