粘滯導航只有當大於960px

我有一個關於jquery的問題。我試圖只在窗口大小大於960像素的情況下應用粘性導航。所以我需要檢查是否有窗口調整大小或滾動事件...我無法弄清楚...粘滯導航只有當大於960px

可能有人請幫我修理那些東西嗎？

下面的代碼我試圖適應

$(function() { 

    var sticky_navigation_offset_top = $('#nav').offset().top; 

    var sticky_navigation = function(){ 
     var scroll_top = $(window).scrollTop(); // our current vertical position from the top 

     if (scroll_top > sticky_navigation_offset_top) { 
      $('#nav').css({ 'position': 'fixed', 'top':0, 'left':0 }); 


     } else { 
      $('#nav').css({ 'position': 'relative' }); 
     } 
    }; 

    sticky_navigation(); 

    $(window).resize(function() { 
    if ($(window).width() > 960) { 
     $(window).scroll(function() { 
     sticky_navigation(); 
    }); 
    } 
}); 
});

來源

2013-03-12 jhon

在處理程序中有一個處理程序對我來說似乎很奇怪。如果需要，你可以將它們串起來。 – iGanja 2013-03-12 21:41:14

羅克森沒有采取淨資產值的偏移考慮和計算必須是在調整大小和o也滾動。

這裏是我的解決方案：http://jsfiddle.net/victmo/SZV6m/

即時通訊使用jQuery的1.8 on功能：win.on('resize scroll', function(){...

的Javascript

var minWidthToStick = 300; 

var nav = $('#nav'); // caching nav 
var offset = nav.offset().top; // getting offset 
var win = $(window); // caching window 

win.on('resize scroll', function(){ 
    if(
     win.width() >= minWidthToStick && 
     win.scrollTop() >= offset 
    ){ 
     nav.css('position', 'fixed'); 
    }else{ 
     nav.css('position', 'relative'); 
    } 
}).resize();

不要忘記把這些代碼你$(document).ready(function(){ ... })函數內部:)

來源

2013-03-12 22:05:02 victmo

完美的Victimo！非常感謝！ – jhon 2013-03-12 22:10:40

很高興聽到Jhon，乾杯！ – victmo 2013-03-12 22:14:38

燁，做到了這樣 $（文件）。就緒（函數（）{ 變種minWidthToStick = 960; 變種NAV = $（ '＃NAV'）; //緩存NAV VAR偏移= NAV。 offset（）。top; //獲得偏移量 var win = $（window）; //緩存窗口 \t win.on（'resize scroll'，function（）{ \t console.log（win.scrollTop（））; \t如果（ \t win.width（）> = minWidthToStick && \t win.scrollTop（）> =偏移 \t）{ \t nav。css（'position'，'fixed'）; \t} else { \t nav.css（'position'，'relative'）; \t} \t}）。resize（）; }）; 完美的作品！ – jhon 2013-03-12 22:15:14

LIVE DEMO

function stickNav() { 
    var setPosition = $(window).width() > 960 ? 'fixed' : 'relative'; 
    $('#nav').css({position:setPosition, left:0, top:0}); 
} 


$(function() { 
    stickNav(); // Do it on DOM ready 
}); 

$(window).resize(function() { 
    stickNav(); // Do in on Resize 
});

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator

來源

2013-03-12 21:42:45

roXon非常感謝！完美的作品！有一件事，在我的導航開始時不粘，需要處於相對位置！這就是爲什麼當我到達菜單時使用滾動功能，相對位置變爲固定！我需要添加什麼才能使用它？在這裏查看結果http://projects.faver.be/faver2013/# 再次感謝！ – jhon 2013-03-12 21:51:21

@jhon我的兩個都不粘。我不知道你的意思。你可以設置演示嗎？ – 2013-03-12 21:53:12

http://projects.faver.be/faver2013 – jhon 2013-03-12 21:53:42

粘滯導航只有當大於960px

回答

相關問題