Question

我正在尝试仅在文档宽度超过769px时创建一个具有固定导航功能的响应式网站。

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

然而，当我将我的粘性标题脚本添加到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');
    }
});

Jquery大于或小于

1 个答案: