can'；使用javascript更改z索引

我正在尝试根据滚动位置更改图像的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");
    }
});

问题 您需要的是

$（文档）

而不是

$（窗口）

默认情况下，您滚动

$（文档）

，而不是

$（窗口）

但是，当您打开Chrome开发工具时，

$（窗口）

不会被滚动，这就是代码工作的原因

若要解决此问题，请将

$（窗口）。滚动（）

更改为

$（文档）。滚动（）

和

$（窗口）。滚动（）

更改为

$（文档）。滚动（）

改进 1。使用jQuery函数

另外，如果您已经在使用jQuery，为什么不使用和：

而不是

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

2。使用干代码

如果您遵循建议1，为什么不将

$（“#背景图像”）

设置为变量，而不是重复两次呢

$(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");
    }
});

---

是的，它确实适用于我并添加了zindex内联样式属性？

$(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");
    }
});