仅当大于 960 像素时才显示粘性导航

Question

我有一个关于 jquery 的问题。仅当窗口大小大于 960 像素时，我才尝试应用粘性导航。所以我需要检查是否有窗口调整大小或滚动事件...我想不通...

有人可以帮我修一下吗？

这是我尝试修改的代码

$(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();
    });
  }
});
});

Answer 1

roXon 没有考虑导航偏移，并且还必须在调整大小和滚动时进行计算。

这是我的解决方案：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(){ ... }) 函数中 :)

Answer 2

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