如果我在特定div之外滚动，如何添加类？

Question

我的问题是，当我滚动到特定的div时，我需要固定的菜单，如果我低于或高于div菜单消失。当我来到那个div时，我设法做那个吸引力但是当我遇到这个时怎么能禁用它结束？有什么建议吗？

＆＃13;

＆＃13;

$(document).on( 'scroll', function(){
    if($(this).scrollTop()>=$('.compare-wrapper').position().top){
	        $('.compare-menu-fixed').css('display','block');
	    }
	    else{

	    	 $('.compare-menu-fixed').css('display','none');
	    }
});

＆＃13;

.compare-wrapper{
  height:900px;
  background-color:white;
}
.header{
  height:600px;
}
.footer{
  height:600px;
}
.compare-menu-fixed{
	position:fixed;
	background-color: red;
	top: 60px;
	width: 100%;
	z-index: 10;
  left:50px;
}

＆＃13;

<script src="https://www.addressfinder.co.nz/assets/v2/widget.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='header'>
</div>
<div class='compare-wrapper'>
    		<div class="compare-menu-fixed">
			<div class="container">
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
					<h2>Compare List <a href="#"><span class="active-img"></span></a></h2>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
					<h3>Hanse 455 <i class="fa fa-map-marker"></i><span>Kastela</span></h3>
					<h4></h4>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
					<h3>Hanse 455 <i class="fa fa-map-marker"></i><span>Kastela</span></h3>
					<h4></h4>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
					<h3>Hanse 455 <i class="fa fa-map-marker"></i><span>Kastela</span></h3>
					<h4></h4>
				</div>
			</div>
		</div>
</div>
<div class='footer'>
</div>

＆＃13;

＆＃13;

＆＃13;

编辑：我发现解决方案很棒：

$(window).scroll(function() {
    console.log($("div.watch")[0].getBoundingClientRect());
    if ($("div.watch")[0].getBoundingClientRect().bottom < 0)
        alert ("i'm out :3");
});

Answer 1

也许尝试这样的事情

$(window).scroll(function() {    
    var scroll = $(window).scrollTop(),
    		headH = $(".header").height();

    if (scroll >= headH) {
        $(".compare-menu-fixed").addClass("display");
    } else {
    		$(".compare-menu-fixed").removeClass("display");
    }
});

.compare-wrapper{
  height:900px;
  background-color:white;
}
.header{
  height:600px;
}
.footer{
  height:600px;
}
.compare-menu-fixed{
	position:fixed;
	background-color: red;
	top: 60px;
	width: 100%;
	z-index: 10;
  left:50px;
}
.display {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.addressfinder.co.nz/assets/v2/widget.js"></script>
<div class='header'>
</div>
<div class='compare-wrapper'>
    		<div class="compare-menu-fixed">
			<div class="container">
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
					<h2>Compare List <a href="#"><span class="active-img"></span></a></h2>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
					<h3>Hanse 455 <i class="fa fa-map-marker"></i><span>Kastela</span></h3>
					<h4></h4>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
					<h3>Hanse 455 <i class="fa fa-map-marker"></i><span>Kastela</span></h3>
					<h4></h4>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
					<h3>Hanse 455 <i class="fa fa-map-marker"></i><span>Kastela</span></h3>
					<h4></h4>
				</div>
			</div>
		</div>
</div>
<div class='footer'>
</div>

我编辑了我的答案，如果它滚动到.compare-menu-fixed

的末尾，则display:none获取.header

Fiddle