jquery - Jquery 大于或小于

Question

我正在尝试仅在文档宽度高于 769 像素时创建具有固定导航的响应式网站。

我有以下代码，当我使用警报测试它时，它可以正常工作，以说明窗口是否大于大小或小于重新调整大小时的大小。

但是，当我将粘性标题脚本添加到 else 语句中时，它不起作用，我不知道为什么。

谁能指出我正确的方向。

谢谢

这是窗口大小声明：

 $(window).resize(function() {
 if ($(window).width() < 769) {
 alert('Less than 769');
 }
 else {
 alert('More than 769');
 }
 });​

如果窗口宽度大于 769，这是我尝试使用的代码：

var aboveHeight = $('header').outerHeight();

$(window).scroll(function() {

    if ($(window).scrollTop() > aboveHeight) {

        $('nav').addClass('fixed').css('top', '0').next().css('padding-top', '99px');
    } else {

        $('nav').removeClass('fixed').next().css('padding-top', '0');
    }
});

谢谢

Answer 1

只需在滚动事件中保存状态蚂蚁测试

var isRightSize = false;

 $(window).resize(function() {
     if ($(window).width() < 769) {
         isRightSize = false;
     }
     else {
         isRightSize = true;
     }
 });​

var aboveHeight = $('header').outerHeight();

$(window).scroll(function() {

    if(!isRightSize)
        return false;

    if ($(window).scrollTop() > aboveHeight) {

        $('nav').addClass('fixed').css('top', '0').next().css('padding-top', '99px');
    } else {

        $('nav').removeClass('fixed').next().css('padding-top', '0');
    }
});