Question

我正在尝试将“ window.width”与“ scrollTop”结合在一起而没有成功。这里的目标是：

1-验证窗口宽度（<600，> 600＆<1000，> 1000）；

2-验证scrollTop;

3-将类“ div_reservas_container”更改为“ div_reservas_container_fixo”。

到目前为止，我已经尝试过：

var windowsize = $(window).width();

$(window).resize(function() {

      windowsize = $(window).width();

      // PC
      if (windowsize > 1000) {
        jQuery(window).scroll(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) {
        jQuery(window).scroll(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) {
        jQuery(window).scroll(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

仅当您调整浏览器宽度时才有效，我需要它自动运行。有人可以帮助我吗？

谢谢。

Answer 1

只是为了帮助... HTML：

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

CSS：

/* 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 */

此JS脚本已由ИльяЗеленько进行了修改和改进，并且可以在Chrome（ok），IE（ok），Firefox（ok），Opera（ok）和Safari 5.1.7上正常运行（似乎在阅读scrollTop时有些空白）：

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)
}

Answer 2

您将函数传递给$（window）.resize，您需要给该函数命名并放在代码末尾，然后将此函数传递给$（window）.resize并从$中调用它（窗口）。调整大小。

您的代码阅读得很差，所以可能会有小错误。

我优化了代码，并避免添加不必要的事件处理程序。

{{1}}

自动合并“ window.width”和“ scrolltop”

2 个答案: