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

Question

我的身体和页脚内容有一个箭头，在一段时间后连续显示，直到它到达页面底部。我试图实现的基本上是在页脚可见时隐藏箭头，并在页脚不可见时继续显示箭头。这个问题是我试图通过在on（＆＃39; inview＆＃39;）函数中添加几个不同的代码选项来覆盖它，以隐藏箭头，但它不起作用并继续执行另一个功能。

这是问题的一个方面：https://jsfiddle.net/39x76r9x/

on（＆＃39; .inview＆＃39;）功能：

// 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（＆＃39;滚动＆＃39;）功能：

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，并仅在其处于视图中时将其设置为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>

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

的jsfiddle