当我缩小窗口并执行另一个时停止脚本的发生

Question

我正在尝试在网站上制作响应式导航栏。我有一个脚本正在运行以向导航栏添加一些效果。但是当窗口大小小于 700 像素时，我想停止我对导航栏所做的一切，并执行另一个脚本。我正在为移动设备执行此操作，但也我希望在用户缩小窗口大小时发生这种情况。

我的问题是：当宽度 > 700px 时没问题，但是当我将大小调整到小于 700px 时，脚本仍在运行，我不希望这样。

如果页面首先加载宽度小于 700px 也可以，但这并不能解决问题。

我的脚本在这里带有JSFIDDLE:

var WindowWidth = $(window).width();

$(document).ready(function($) {
  handleNav();
  $(window).resize(function() {
    //here i call the function again after i resize to check if the condition of window width > 700px is stil true

    WindowWidth = $(window).width();
    handleNav();
  });
});


function handleNav() {

  if (WindowWidth > 700) {
    $(document).scroll(function() {

      if (300 / $(document).scrollTop() > 0.5 && $(document).scrollTop() > 100) {
        $('#abs-header').css({
          'opacity': (500 / ($(document).scrollTop() + 1))
        });
        $('#abs-header').css({
          'background-color': 'rgba(113, 20, 20,1)'
        });
      }

      if ($(document).scrollTop() < 100) {
        $('#abs-header').css({
          'background-color': 'transparent'
        });
      }
    });
  } else {
    //Other code here that i didn't make yet but I want to hapen when the window is less than 700px wide.
  }
}

我尝试了多种方法，但都没有奏效。我真的需要你的帮助！

Answer 1

那是因为当屏幕超过 700 像素时添加了 scroll 事件处理程序，然后不管后面的宽度如何，它都会继续运行。

正确代码：

$(document).ready(function(){
    handleNav();

    $(window).resize(function(){

        //here i call the function again after i resize to check if the condition of window width > 700px is stil true            
        handleNav();    
   });
});


function handleNav() {

    if ( $(window).width() > 700) {
        $(document).scroll(function() {

            if(300 / $(document).scrollTop() > 0.5 && $(document).scrollTop() > 100){
                $('#abs-header').css({'opacity': (500 / ($(document).scrollTop()+1))});
                $('#abs-header').css({'background-color' : 'rgba(113, 20, 20,1)'});
            }

            if($(document).scrollTop() < 100){
                $('#abs-header').css({'background-color' : 'transparent'});
            }
        });
    } else {
        //Other code here that i didn't make yet but I want to hapen when the window is less than 700px wide.

        // remove handler
        $(document).off('scroll');

    }
}

或者更确切地说，只是将您的逻辑放在滚动处理程序中并检查那里的宽度

$(document).ready(function(){

    $(document).scroll(function() {
        if ( $(window).width() > 700) {
            if (300 / $(document).scrollTop() > 0.5 && $(document).scrollTop() > 100){
                $('#abs-header').css({'opacity': (500 / ($(document).scrollTop()+1))});
                $('#abs-header').css({'background-color' : 'rgba(113, 20, 20,1)'});
            }

            if($(document).scrollTop() < 100){
                $('#abs-header').css({'background-color' : 'transparent'});
            }
        } else {
             //Other code here that i didn't make yet but I want to hapen when the window is less than 700px wide.
        }
    });

});

Answer 2

嗯，最明显的解决方案是将 if 语句放在滚动函数中。

我可能是错的，但事实可能证明文档存储了它必须执行的功能。而当你的 IF-ELSE 为 false 时，函数就已经存在了。

所以我建议像

$(document).scroll(function() {
    if (WindowWidth > 700) {
    ....

另一种方法是在 ELSE 子句中为同一事件分配不同的函数。

Answer 3

当您的页面加载宽度>700 像素时，该函数将附加到滚动事件。因此，当宽度变小时，您必须明确删除它。另一方面，当窗口以宽度

因此，要么从滚动中分离函数，要么按照其他答案中的建议检查函数内部的宽度。

Answer 4

一旦你第一次分配$(document).scroll，
无论大小如何，它总是会执行

所以，改为分配相同的处理程序

var WindowWidth = $(window).width();

$(document).ready(function($) {
  handleNav();
  $(window).resize(function() {
    WindowWidth = $(window).width();
    handleNav();
  });
  $(document).scroll(handleNav);
});

function handleNav() {
  if (WindowWidth > 700) {
    if (300 / $(document).scrollTop() > 0.5 && $(document).scrollTop() > 100) {
      $('#abs-header').css({
        'opacity': (500 / ($(document).scrollTop() + 1))
      });
      $('#abs-header').css({
        'background-color': 'rgba(113, 20, 20,1)'
      });
    }

    if ($(document).scrollTop() < 100) {
      $('#abs-header').css({
        'background-color': 'transparent'
      });
    }
  } else {
    //Other code here that i didn't make yet but I want to hapen when the window is less than 700px wide.
  }
}

Answer 5

我改变了一点 JQ 结构。它现在可以工作（调整大小！而不是刷新！）

检查下面的 sn-p 或 jsfiddle > JSFIDDLE

在我的例子中，如果你在700px以上，#abs-header的bck是red，如果你在700px以下，#abs-header的bck是blue

让我知道这是否适合你

$(document).ready(function($){
    $(window).on("resize",function(){
      
  





    if ($(window).width() > 700){
        $(document).scroll(function(){

            if(300 / $(document).scrollTop() > 0.5 && $(document).scrollTop() > 100){
                $('#abs-header').css({'opacity': (500 / ($(document).scrollTop()+1))});
                $('#abs-header').css({'background-color' : 'rgba(113, 20, 20,1)'});
            }

            if($(document).scrollTop() < 100){
                $('#abs-header').css({'background-color' : 'transparent'});
            }
        });
    }else{
       $(document).scroll(function(){
         if(300 / $(document).scrollTop() > 0.5 && $(document).scrollTop() > 100){
           $('#abs-header').css({'background-color' : 'blue'});
        }
        if($(document).scrollTop() < 100){
       $('#abs-header').css({'background-color' : 'transparent'});
       }
       });
    }
});
});

#abs-header{
    position: fixed;
    width: 100%;
    height: 65px;
    opacity: 1;
    top: 0;
    transition: opacity 0.2s linear,background-color 0.2s linear;
    left: 0;
    color: white;
    text-transform:uppercase;
    font-weight: 500;
    z-index: 1001;
    font-size: 13px;
    
}
#abs-header a{
    color: white;
}

#main-menu-container{
    width: 100%;
    height: 65px;
    align-items: center;
    display: inline-flex;
}
nav#main-nav{
    margin-left: 10px;
}
nav#main-nav > .nav > li{
    margin: 0 10px;
    margin: 0 10px;
    position: relative;
    display: inline-block;
    height: 65px;
    vertical-align: middle;
    line-height: 65px;
}
nav#main-nav > .nav > li:before{
    content: "";
    position: absolute;
    bottom:0;
    width: 100%;
    height: 3px;
    background-color: white;
    box-shadow: 0px 1px 2px #e1e1e1;
    opacity: 0;
    visibility: hidden;
    transition: 0.05s linear;
}
nav#main-nav .sub-menu li:hover a{
    color:#711414;
}
/*Hovering the deep one*/
nav#main-nav > .nav > .deeper:hover:before{
    opacity: 0;
    visibility: hidden;
}
/*Adjusting position to deep ones(because of the arrow)*/
nav#main-nav > .nav > .deeper:before{
    left:-10px;
}
/*The active one*/
nav#main-nav > .nav > .active:before{
    opacity: 1;
    visibility: visible;
}
/*When hovering*/
nav#main-nav > .nav > li:hover:before{
    opacity: 1;
    visibility: visible;
}
p{
font-size:8px;
}
img{
  height 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="abs-header">
            <div id="main-menu-container">
                <nav id="main-nav">
                    <ul class="nav">
                      <li class="item-119 default"><a href="/vatra/index.php/en/">Home</a></li>
                      <li class="item-150"><a href="/vatra/index.php/en/about-us">About us</a></li>
                      <li class="item-151 current active"><a href="/vatra/index.php/en/contact-us">Contact</a></li>
                    </ul>

                </nav>
    
</div>
</header>

<img src="http://dragonflycap.com/wp-content/uploads/2016/06/brick-1.jpg" />
<p>
CONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERCONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONCONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONCONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONCONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONCONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONCONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONCONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONCONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONCONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERE
CONTENT HERECONTENT HERECONTENT HERECONTENT HERECONTENT HERECONE
</p>

Answer 6

感谢大家快速快速的回复！我现在明白滚动事件的问题了。我选择这样做：

jQuery(document).ready(function(){
    handleNav();
});

function handleNav() {
    jQuery(document).scroll(function(){
        if(jQuery(window).width() > 993){
            if(300 / jQuery(document).scrollTop() > 0.5 && jQuery(document).scrollTop() > 100){
                jQuery('#abs-header').css({'opacity': (500 / (jQuery(document).scrollTop()+1))});
                jQuery('.home-page #abs-header').css({'background-color' : 'rgba(113, 20, 20,1)'});
            }

            if(jQuery(document).scrollTop() < 100){
                jQuery('.home-page #abs-header').css({'background-color' : 'transparent'});
            }

        }
        else
            {
                //other code here
            }
    });
}

我不知道该选择哪个答案，因为你们都回答了我的问题。我会选择最能帮助我理解的一个。