Javascript “合并”；窗口宽度“；及；scrolltop"；自动地

我正在尝试将“窗口宽度”与“滚动顶部”结合起来，但没有成功。 这里的目标是：

1-验证窗口宽度（600和1000）

2-验证滚动顶部

3-将类“div\u reservas\u container”更改为“div\u reservas\u container\u fixo”

到目前为止，我已经尝试了以下方法：

var windowsize=$（window.width（）；
$（窗口）。调整大小（函数（）{
windowsize=$（window.width（）；
//个人电脑
如果（窗口大小>1000）{
jQuery（窗口）.滚动（函数（）{
if（jQuery（this）.scrollTop（）>485）{
jQuery（“.div_reservas_container”）.addClass（“div_reservas_container_fixo”）；
}否则{
jQuery（“.div_reservas_container”）.removeClass（“div_reservas_container_fixo”）；
}
});
}
//职能指令手册
//平板电脑
如果（窗口大小>600&窗口大小<1000）{
jQuery（窗口）.滚动（函数（）{
if（jQuery（this）.scrollTop（）>355）{
jQuery（“.div_reservas_container”）.addClass（“div_reservas_container_fixo”）；
}否则{
jQuery（“.div_reservas_container”）.removeClass（“div_reservas_container_fixo”）；
}
});
}
//职能指令手册
//流动的
如果（窗口大小<600）{
jQuery（窗口）.滚动（函数（）{
if（jQuery（this）.scrollTop（）>255）{
jQuery（“.div_reservas_container”）.addClass（“div_reservas_container_fixo”）；
}否则{
jQuery（“.div_reservas_container”）.removeClass（“div_reservas_container_fixo”）；
}
});
}
//FIM

将函数传递给$（窗口）。调整大小，您需要为该函数指定一个名称并将其放在代码末尾，然后将该函数传递给$（窗口）。调整大小并从$（窗口）调用它。调整大小

您的代码读起来非常糟糕，因此可能有一个小错误

我优化了您的代码，并防止添加不必要的事件处理程序

var scrollHandler
myFunction（）//立即调用
$（窗口）.resize（myFunction）//调用resize
函数myFunction（）{
var windowsize=$（window.width（）；
var scrollTop=window.pageYOffset | | document.documentElement.scrollTop；
var reservasContainer=jQuery（“.div_reservas_container”）；
removeEventListener（'scroll'，scrollHandler）；
//个人电脑
如果（窗口大小>1000）{
scrollHandler=函数（）{
toggleClass（“div\u reservas\u container\u fixo”，scrollTop>485）；
};
}
//职能指令手册
//平板电脑
如果（窗口大小>600&&Windows大小<1000）{
scrollHandler=函数（）{
toggleClass（“div\u reservas\u container\u fixo”，scrollTop>355）；
};
}
//职能指令手册
//流动的
如果（窗口大小<600）{
scrollHandler=函数（）{
toggleClass（“div\u reservas\u container\u fixo”，scrollTop>255）；
};
//职能指令手册
}
jQuery（窗口）.scroll（scrollHandler）
}

只是为了帮助……HTML：

<div class="div_reservas_container"></div>

这个JS脚本已经过修改和改进，可以在Chrome（ok）、IE（ok）、Firefox（ok）、Opera（ok）和Safari 5.1.7上正常工作（看起来有点空白）：

var scrollHandler
myFunction（）//立即调用
$（窗口）.resize（myFunction）//调用resize
函数myFunction（）{
var windowsize=$（window.width（）；
removeEventListener（'scroll'，scrollHandler）
//个人电脑
如果（窗口大小>1000）{
scrollHandler=函数（）{
if（jQuery（this）.scrollTop（）>485）{
jQuery（“.div_reservas_container”）.addClass（“div_reservas_container_fixo”）；
}否则{
jQuery（“.div_reservas_container”）.removeClass（“div_reservas_container_fixo”）；
}
};
}
//职能指令手册
//平板电脑
如果（窗口大小>600&窗口大小<1000）{
scrollHandler=函数（）{
if（jQuery（this）.scrollTop（）>355）{
jQuery（“.div_reservas_container”）.addClass（“div_reservas_container_fixo”）；
}否则{
jQuery（“.div_reservas_container”）.removeClass（“div_reservas_container_fixo”）；
}
};
}
//职能指令手册
//流动的
如果（窗口大小<600）{
scrollHandler=函数（）{
if（jQuery（this）.scrollTop（）>255）{
jQuery（“.div_reservas_container”）.addClass（“div_reservas_container_fixo”）；
}否则{
jQuery（“.div_reservas_container”）.removeClass（“div_reservas_container_fixo”）；
}
};
//职能指令手册
}
jQuery（窗口）.scroll（scrollHandler）
}

此脚本是css STICKY的替代方案，css STICKY不在IE和SAFARI上工作……而且该网站是响应性的，这就是为什么我需要验证window.width和walktop。将函数传递到

$（窗口）。调整大小

，需要给此函数一个名称并将其放在代码末尾，然后将此函数传递到

$（窗口）.调整大小

并从

$（窗口）中调用它.resize

。你能告诉我怎么做吗？我正在努力使用这个脚本，因为我不是JQUERY方面的专家。你只需要一个

窗口。滚动
侦听器/处理程序并在其中管理不同的大小。在另一个事件处理程序中创建新的事件侦听器而不删除任何以前的事件处理程序，这是一个非常糟糕的做法。我使你的代码更具可读性易读，在我的编辑器中，它不会出错这是一个现代功能，它有，你可以用
var
替换
let
，哦，伙计…无论如何都不起作用…即使我调整浏览器宽度…我真的很迷茫。哇！！！！！非常感谢你！！！谢谢！！！！！非常有效！！！你是一个救命恩人！！！我已经成功了ted在Chrome、IE、Firefox、Opera和Safari 5.1.7上运行良好。在所有浏览器中都能正常工作……只是Safari对scrollTop的理解似乎有所不同，有一些差距。。。。
/* MOBILE */
.div_reservas_container
{
width: 100%;
height: 60px;
top: 0;
left: 0;
margin-top: 315px;
background-color: #333333;
z-index: 888;
position:absolute;
}

.div_reservas_container_fixo
{
width: 100%;
height: 60px;
top: 0;
left: 0;
margin-top: 65px;
background-color: #333333;
z-index: 888;
position:fixed;
}
/* FIM */

/* TABLET */
@media screen and (min-width: 600px)
{
.div_reservas_container
{
width: 100%;
height: 60px;
top: 0;
left: 0;
margin-top: 435px;
background-color: #333333;
z-index: 888;
position:absolute;
}
.div_reservas_container_fixo
{
width: 100%;
height: 60px;
top: 0;
left: 0;
margin-top: 85px;
background-color: #333333;
z-index: 888;
position:fixed;
}
}
/* FIM */

/* PC */
@media screen and (min-width: 1000px)
{
.div_reservas_container
{
width: 100%;
height: 80px;
top: 0;
left: 0;
margin-top: 605px;
background-color: #333333;
z-index: 888;
position:absolute;
}

.div_reservas_container_fixo
{
width: 100%;
height: 80px;
top: 0;
left: 0;
margin-top: 105px;
background-color: #333333;
z-index: 888;
position:fixed;
}
}
/* FIM */

var scrollHandler

myFunction() // calling immediately

$(window).resize(myFunction) // calling on resize

function myFunction () {
    var windowsize = $(window).width();

    window.removeEventListener('scroll', scrollHandler)

    // PC
    if (windowsize > 1000) {

        scrollHandler = function () {
            if (jQuery(this).scrollTop() > 485) {
                jQuery(".div_reservas_container").addClass("div_reservas_container_fixo");
            } else {
                jQuery(".div_reservas_container").removeClass("div_reservas_container_fixo");
            }
        };
    }
    // FIM

 // TABLET
    if (windowsize > 600 & windowsize < 1000) {
        scrollHandler = function () {
            if (jQuery(this).scrollTop() > 355) {
                jQuery(".div_reservas_container").addClass("div_reservas_container_fixo");
            } else {
                jQuery(".div_reservas_container").removeClass("div_reservas_container_fixo");
            }
        };
    }
    // FIM

    // MOBILE
    if (windowsize < 600) {
        scrollHandler = function () {
            if (jQuery(this).scrollTop() > 255) {
                jQuery(".div_reservas_container").addClass("div_reservas_container_fixo");
            } else {
                jQuery(".div_reservas_container").removeClass("div_reservas_container_fixo");
            }
        };
        // FIM
    }

    jQuery(window).scroll(scrollHandler)
}