Добрый день! Подскажите, пожалуйста, как сделать так, чтобы блок #top-panel появлялся только тогда, когда при прокрутке страницы блок #content достигал бы уже верхней части страницы? Благодарю за помощь!
$(function() {
$(window).scroll(function(){
var distanceTop = $('#content').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop)
$('#top-panel').animate({'top':'0px'},300);
else
$('#top-panel').stop(true).animate({'top':'-50px'},200);
});
});
#cover {
position: relative;
width: 100%;
height: 900px;
height: 100vh;
background: green;
}
#content {
position: relative;
width: 100%;
height: 3000px;
background: blue;
}
#top-panel {
position: fixed;
overflow: hidden;
top: -50px;
width: 100%;
height: 50px;
z-index: 5;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cover" class="cover">
</div>
<div class="content" id="content">
</div>
<div id="top-panel" class="top-panel"></div>