Question

我根据窗口宽度调整代码时遇到了一些麻烦。如果窗口宽度小于450，我希望它滚动到某个部分，否则滚动到另一个部分。我哪里错了？

$('.artist-kina').click(function( e ){
    e.preventDefault();
    $('html, body').animate({
        if ($(window).width() < 450 {
            scrollTop: $('#artists').offset().top - 60
        }
        else {
            scrollTop: $('#artists').offset().top - 115
        }
    }, 500);
    $('.artists-home').fadeOut(function() {
        $('.kina-gallery').fadeIn('slow');
    });
});

Answer 1

括号是一个问题，但从更广泛的意义上讲，语法完全错误：

$('html, body').animate({
    scrollTop: $("#artists").offset().top - (
      $(window).width() < 450 ? 60 : 115
    )
}, 500);

您不能只将if语句放入对象文字的中间。但是，您可以使用? :运算符在值之间进行选择，作为表达式的一部分。

现在请注意，使用<body>的滚动位置搞错可能会在所有浏览器中起作用，也可能不起作用。 Safari 习惯有问题;它可能适用于更现代版本的浏览器。

Answer 2

嵌套代码的方式有几个问题，但最大的问题是Animate调用。

这应该有效：

$('.artist-kina').click(function( e ){
    e.preventDefault();
    if ($(window).width() < 450) {
        $("html, body").animate({
            scrollTop: $('#artists').offset().top-60
        }, 500);
    }
    else {
        $("html, body").animate({
            scrollTop: $('#artists').offset().top-115
        }, 500);
    }
    $('.artists-home').fadeOut('slow', function() {
        $('.kina-gallery').fadeIn('slow');
    });
});

这是一个有效的jsFiddle：http://jsfiddle.net/yy1v940u/5/

jQuery窗口宽度有条件不起作用

2 个答案: