时间戳

首页 > 解决方案 > 自动组合“window.width”和“scrolltop”

javascript - 自动组合“window.width”和“scrolltop”

问题描述

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

1 - 验证窗口宽度（<600, >600&<1000, >1000）；

2 - 验证滚动顶部；

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

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

提前致谢。

标签： javascriptjquery

解决方案

只是为了帮助...... 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)
}

推荐阅读