2015-04-28 31 views
0

我已經成功創建了一個粘滯導航並且工作得很好。但是,我希望粘性導航在瀏覽器低於或等於770像素時啓動或運行。Jquery粘滯導航滿足一定條件時觸發

到目前爲止,這是我的代碼

$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 to Fires up immediately if the browser is lower than 770px */ 
     stickyFunction(); 
    } 
    $j(window).resize(function() { /*Suppose to fires up if the browser resize*/ 
    if(wi <= 770) { 
     stickyFunction(); 
    } 
    }); 
}); 

如何調用stickyfunction到當瀏覽器的寬度滿足條件運行?

謝謝!

回答

0

只需你使用粘性爲滾動事件,並嘗試使用窗口大小調整事件中滾動事件,使你的函數沒有調整大小窗戶開.. 使用本

/*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"); 
       } 
      }); 

代替

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; 
    } 

並向窗口滾動事件

$j(window).on('scroll', stickyFunction); 

並調整大小事件

$j(window).on('resize',function() { /*Suppose to fires up if the browser resize*/ 
wi = $j(window).width();   
if(wi <= 770) { 
     stickyFunction(); 
    } 
    }); 
+0

感謝您的簡化和更好的邏輯。我只想在瀏覽器低於770像素的情況下運行此效果。 – rodge

+0

@rodge您應該在調整大小時計算window.width ..查看更新回答 –

+1

謝謝!問題是,當瀏覽器調整大小時,寬度會得到更新。 – rodge