如何在满足另一个 .on() 函数的条件时覆盖或停止 .on() 函数？

Question

我的正文和页脚内容带有一个箭头，该箭头会在稍微延迟后持续显示，直到到达页面底部。我想要实现的基本上是在页脚可见时隐藏箭头，并在页脚不可见时恢复显示箭头。这个问题是我试图通过在 on('inview') 函数中添加几个不同的代码选项来隐藏箭头来覆盖它，但它不起作用并继续执行另一个函数。

这是问题的 jsfiddle：https://jsfiddle.net/39x76r9x/

on('.inview') 函数：

// WHEN FOOTER COMES IN VIEW HIDE ARROW
  $(document).ready(function(){
        $('footer').on('inview', function(event, isInView) {
          if (isInView) {
            // element is now visible in the viewport
              $('.bounce').hide();
              //$('.bounce').css('display','none');
              //$(".bounce").css("cssText", "display: none !important;");
              $('.bounce').attr("style", "display: none !important");
              console.log('element visible');
              $('#text-status').text("Footer Visible");
          } else {
            // element has gone out of viewport
              $('.bounce').show();
              console.log('element not visible');
              $('#text-status').text("Footer Not Visible");
          }
        });
  });

on('scroll') 函数：

var scrollPos;

$(window).on('scroll', function(){

    $('.bounce').hide(); // hide the bouncing arrow
    scrollPos = $(window).scrollTop(); // gets the vertical scroll position

    // check if scrollbar has reach end of page
    if(scrollPos == ($(document).height() - $(window).height()))
    {
        $('.bounce').hide();
    }
    else if(scrollPos == 0) // scrollbar at top of page
    {
        $('.bounce').delay(800).fadeIn(300);
    }

});

// jquery.unevent plugin - when an event hasn't been fired for a specified time (# in milliseconds at end of this function), this event will trigger
$(window).on('scroll', function(){
    $('.bounce').fadeIn(300);

    if(scrollPos == ($(document).height() - $(window).height()))
    {
        $('.bounce').hide();
    }
}, 800);

Answer 1

您可以创建类似 footerIsVisible 的标志并将其设置为 false，并仅在 view.And 中设置它 true 在 jQuery 中使用它unevent 显示箭头图标。这是一个工作示例，说明我认为您正在努力实现的目标。我删除了一些我觉得多余的代码。

var footerIsVisible = false;
var scrollPos;
    
$(window).on('scroll', function(){      
    $('.bounce').hide(); 
    scrollPos = $(window).scrollTop();        
    if(scrollPos == ($(document).height() - $(window).height())){
        $('.bounce').hide();
    }
        
});
    
// jquery.unevent plugin - when an event hasn't been fired for a specified time (# in milliseconds at end of this function), this event will trigger
$(window).on('scroll', function(){
  if(!footerIsVisible){
     $('.bounce').fadeIn(300);      
    }     
}, 800);
// WHEN FOOTER COMES IN VIEW HIDE ARROW
  $(document).ready(function(){
        $('footer').on('inview', function(event, isInView) {
          if (isInView) {
              footerIsVisible = true;
              $('#text-status').text("Footer Visible");
          } else {
            footerIsVisible = false;
              $('#text-status').text("Footer Not Visible");
          }
        });
  });

.fa {
 width: 50px;
 display: block;
 text-align: center;
 color: white;
 font: normal 85px 'FontAwesome';
 line-height: 105px;
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
}
.fa-angle-double-down:before {content: "⍗";}
.bounce {
    z-index: 9999 !important;
    opacity: 0.6;
 position: fixed;
 bottom: 30px;
 left: 50% ;
 width: 50px;
 height: 50px;
 margin-left: -30px;
    bottom: 3%;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 border-radius: 50%;
 animation: bounce 2s infinite;
 -webkit-animation: bounce 2s infinite;
 -moz-animation: bounce 2s infinite;
 -o-animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
 40% {-webkit-transform: translateY(-30px);}
 60% {-webkit-transform: translateY(-15px);}
}
@-moz-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
 40% {-moz-transform: translateY(-30px);}
 60% {-moz-transform: translateY(-15px);}
}
@-o-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
 40% {-o-transform: translateY(-30px);}
 60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 50% {transform: translateY(-30px);}
 50% {transform: translateY(-15px);}
}

<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <title>Scroll</title>
</head>
<body>
<div id="text-status" style="position:fixed;right:10px;font-size:40px;">Footer Not Visible</div>
<div class="bounce">
    <i class="fa fa-angle-double-down"></i>
</div>
<div style="height:1000px;background:red;">
  body content
</div>
<footer style="height:100px;background:green;">
  footer content
</footer>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://rawgit.com/mmmeff/jquery.inview2/master/jquery.inview2.min.js"></script>
<script src="https://rawgit.com/yckart/jquery.unevent.js/master/jquery.unevent.js"></script> 
</body>
</html>

这是该代码的 jsfiddle https://jsfiddle.net/azs06/1un4dc11/1/

如何在满足另一个 .on() 函数的条件时覆盖或停止 .on() 函数？

How to override or stop an .on() function when it meets the condition of another .on() function?

javascript

jquery

scroll

function

jquery-events