粘滞导航只有当大于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

回答

相关问题