None None - 3 months ago 8
jQuery Question

How to add class if i scroll outside specific div?

My problem is that i need fixed menu when i scroll to specific div and if im bellow or above div that menu dissapear.I manage to do that apperars when i come to that div but how can i disable it when it comes to the end? Any suggestion?



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

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

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

<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>





EDIT: i found solution its great :

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

Answer

Maybe try something like this

$(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://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>

I edit my answer, now .compare-menu-fixed get display:none if it scroll to end of .header

Fiddle

Comments