问题

Question

我正在尝试根据滚动位置更改图像的Z索引，目前在chrome中（但它应该适用于所有broswers）。无论如何，它不是在使用chrome，除非我进入检查模式并且我不明白为什么它只在检查模式下工作？

这是剧本：

$( window ).scroll(function() {
    var scrollTop = $(window).scrollTop();
    if ($(this).scrollTop()>700) { 
        document.getElementById("back-ground-image").style.zIndex = "-9";
        console.log("-9");
    } else {
        document.getElementById("back-ground-image").style.zIndex = "-19";
        console.log("-19");
    }
});

Answer 1

问题

您需要的是$(document)而不是$(window)。

默认情况下，您滚动$(document)，而不是$(window)。

但是，当您打开Chrome DevTools时，$(window)未滚动，这就是您的代码有效的原因。

要解决此问题，请将$(window).scroll()更改为$(document).scroll()，将$(window).scrollTop()更改为$(document).scrollTop()

的改进

<强> 1。使用jQuery函数

此外，如果您已经在使用jQuery，为什么不使用jQuery selectors和.css()：

$("#back-ground-image").css('zIndex', '-9')

而不是

document.getElementById("back-ground-image").style.zIndex = "-9";

<强> 2。使用DRY代码

(Don't Repeat Yourself)

如果您遵循建议＃1，为什么不将$("#back-ground-image")设置为变量而不是重复两次。

$(document).scroll(function() {
    var scrollTop = $(document).scrollTop(),
        $bkImg = $("#back-ground-image");
    if ($(this).scrollTop() > 700) {
        $bkImg.css('zIndex', '-9');
        console.log("-9");
    } else {
        $bkImg.css('zIndex', '-19');
        console.log("-19");
    }
});

否则，您可以使用：

$(document).scroll(function() {
    var scrollTop = $(document).scrollTop(),
        background = document.getElementById("back-ground-image");
    if ($(this).scrollTop()>700) { 
        background.style.zIndex = "-9";
        console.log("-9");
    } else {
        background.style.zIndex = "-19";
        console.log("-19");
    }
});

无法使用javascript

1 个答案:

问题

的改进