I have a specific goal in mind: When hovering over the div labeled "hey," I want a background transition to occur. However, once the div reaches the red part of the page, I do not want that hover effect to continue on the div.
When you hover over my ".ok" div (the one labeled hey), it undergoes a color and background transition.
But here's the catch - when it hits the red section, I don't want the hover effect to persist on the ".ok" div anymore.
Issues to be aware of: I tried implementing an if-else statement without success. So, I placed it within my $(window).scroll function, but it only triggers upon actual scrolling. It doesn't work on page load.
Fiddle: https://jsfiddle.net/jzhang172/j2yrumyg/3/
$(function(){
var cheese = $('.ok').offset().top; //Define top of 'hey'
// Animates when it reaches the red part of the page
$(window).scroll(function() {
if ($(window).scrollTop() >= cheese) {
$('.ok').addClass('top');
} else {
$('.ok').removeClass('top');
}
});
// This section is independent of the scroll event and controls hover changes on the ".ok" div.
if ($(window).scrollTop() >= cheese) {
} else if ($(window).scrollTop() <= cheese) {
$('.ok').hover(function(){
$(this).addClass('proj-hover');
},function(){
$(this).removeClass('proj-hover');
});
}
// Animate on click
$('.ok').click(function(){
if ($(window).scrollTop() >= cheese) {
} else {
$("body, html").animate({
scrollTop: $('.other').offset().top
}, 600);
}
});
});*{
box-sizing:border-box;
}
body,html{
padding:0;
margin:0;
}
.div{
height:100vh;
width:100%;
background:#6464FF;
}
.other{
height:1000px;
width:100%;
background:#FF6161;
}
.ok{
position:absolute;
bottom:0;
left:50%;
margin-left:-100px;
width:200px;
height:50px;
line-height:50px;
background:black;
color:white;
text-align:center;
transition:1s;
}
.top{
position:fixed;
top:0;
left:0;
transition:.7s;
margin-left: 0px;
width:100%;
}
.proj-hover{
background:white;
color:black;
}
.blue{
background:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="ok">Hey</div>
</div>
<div class="other"></div>