javascript - StickyNav - 调试

Question

// STICKY NAVBAR

var num = 816; //number of pixels before modifying styles

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('.navbar').addClass('navbar-fixed-top');
    } else {
        $('.navbar').removeClass('navbar-fixed-top');
    }
});

这是我的粘性导航栏代码(使用自定义的 Bootstrap 导航栏)，它在桌面浏览器上运行得非常好......但是 var num 是以像素而不是 em。这不能很好地转化为移动设备。

有没有办法:

• 以 em 而不是 px 测量滚动 或者……

• 检测条何时到达窗口顶部，然后使其粘住而不是使用硬编码测量值？

Answer 1

您遇到的问题与移动设备上的不同测量无关，因为它在任何设备上始终以像素为单位进行测量和计算。您的导航栏的位置更有可能在移动设备上有所不同。

是的，一个解决方案是获取导航栏的当前偏移量并使用它来代替硬编码的“num”，如下所示:

var navbarOffset = $('.navbar').offset();
var num = navbarOffset.top;

但请记住，这种方法假设导航栏的位置在其生命周期内不会改变。一旦你处理了一个响应式设计，你应该在每次内容包装元素的大小发生变化时重新计算导航栏偏移量。 这整件事有多精细，你可以在这里查看: https://github.com/zurb/foundation/blob/master/js/foundation/foundation.topbar.js