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

Question

我正在尝试在网站上制作响应式导航栏。我有一个脚本运行当 window 大小小于 700 像素时向 navbar.But 添加一些效果我想停止我正在使用导航栏所做的一切，然后再做一个 script.I 正在为移动设备执行此操作，但我也希望在用户缩小 window.

时发生这种情况

我的问题是：当宽度 > 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.
  }
}

我尝试了多种方法，worked.I 都不需要你的帮助！

Answer 1

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

我可能是错的，但结果可能是文档存储了它必须执行的函数。当您的 IF-ELSE 为假时，函数已经存在。

所以我建议

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

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

Answer 2

当您的页面加载宽度>700 像素时，该函数将附加到滚动事件。因此，当宽度变小时，您必须明确删除它。另一方面，当 window 以宽度 <700 加载时，该函数不附加滚动事件 - 所以它工作正常。一旦宽度变高，它就会被附加并开始相应地工作。

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

Answer 3

第一次分配 $(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 4

我稍微改变了JQ结构。它现在有效（调整大小！不是刷新！）

检查下面的代码片段或 jsfiddle > JSFIDDLE

在我的示例中，如果您在 700px 以上，则 #abs-header 的 bck 为 red，如果您在 700px 以下，则 #abs-header 是 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 5

那是因为当屏幕超过 700px 时你添加了 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 6

感谢大家的快速回复！我现在明白滚动条的问题了event.I选择这样做:

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

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

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

Stop script from happening when I resize down the window and do another one

javascript

jquery

menu

navbar

responsive-design