Javascript Jquery一次只创建一个框

我试图在不同的位置创建不同的框（仅一次），但我无法完成这一点，这是JSFIDLE：

$（函数（）{
$（窗口）。滚动（函数（）{
var popWidth=“44%”；
var popHeight=“30%”；
函数pop（popID）{
$（“#”+popID.fadeIn（）.css（{'width'：String（popWidth），'height'：String（popHeight）
})
};
功能块（方框、顶部、左侧、彩色）{
变量$btn=$（''）；
$（“#容器”）.children（）.append（$btn）；
$（$btn）.css（“背景色”，颜色）.animate（{top:top，left:left}）；
};
var range=$（this.scrollLeft（）；
如果（范围>500和范围<600）{
弹出（“弹出1”）
$（'#popup2'）。淡出（函数（）{
$（'#popup2'）.hide（）；
});
块（'box1'、'84%'、'10%'、'#f04'）；
}否则如果（范围>1500和范围<1600）{
pop（'popup2'）；
$（'#popup1'）。淡出（函数（）{
$（'#popup1'）.hide（）；
});
块（“框2”、“84%”、“10%”、“黄色”）；
};
});
});

编辑：我看到的代码与发布的代码无关，但与不相关的JSFIDLE

您应该尝试

$（'.popup_block'）。而不是（'#'+popID）.finish（）.hide（）：

$（函数（）{
$（窗口）。滚动（函数（）{
var popWidth=“44%”；
var popHeight=“30%”；
波皮德变种；
var range=$（this.scrollLeft（）；
开关（范围）{
案件（500）：
popID='popup1'；
打破
案件（1000）：
popID='popup2'；
打破
}
$（'.popup_block'）。而不是（'#'+popID）.finish（）.hide（）；/将切换更改为以下内容：

switch (true) {
    case (range > 480 && range < 520):
        popID = 'popup1';
        break;

    case (range > 980 && range < 1020):
        popID = 'popup2';
        break;
}

if (popID) {
    $('.popup_block').hide();
    $('#' + popID).fadeIn().css({
        width: popWidth,
        height: popHeight
    })
    .prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
}

开关（真）{
案例（范围>480和范围<520）：
popID='popup1'；
打破
案例（范围>980和范围<1020）：
popID='popup2'；
打破
}
if（popID）{
$（'.popup_block'）.hide（）；
$（'#'+popID）.fadeIn（）.css({
宽度：popWidth，
高度：popHeight
})
.prepend（“”）；
}

基本上，这里您将
scrollLeft
与值的范围进行比较，这可以确保如果快速滚动，您不会跳过
500
或
1000
事件。您也可以使用
if-else if
语句代替开关

您还需要使用
$（'.popup_block'）.hide（）；
隐藏以前的块

演示：小提琴似乎没有更新
$(function () {
    $(window).scroll(function () {

        var popWidth = "44%";
        var popHeight = "30%";
        var popID;
        var range = $(this).scrollLeft();
        switch (range) {
            case (500):
                popID = 'popup1';
                break;
            case (1000):
                popID = 'popup2';
                break;
        }
        $('.popup_block').not('#' + popID).finish().hide(); //<< call here
        $('#' + popID).fadeIn().css({
            'width': String(popWidth),
            'height': String(popHeight)
        }).prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');

    });
});

switch (true) {
    case (range > 480 && range < 520):
        popID = 'popup1';
        break;

    case (range > 980 && range < 1020):
        popID = 'popup2';
        break;
}

if (popID) {
    $('.popup_block').hide();
    $('#' + popID).fadeIn().css({
        width: popWidth,
        height: popHeight
    })
    .prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
}