Good day! Can you please tell how to make the # top-panel block appear only when, when scrolling a page, the #content block reaches the top of the page already? Thank you for your help!

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

    1 answer 1

     var distanceTop = $('#content').offset().top; 

     $(function() { $(window).scroll(function(){ var distanceTop = $('#content').offset().top; 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>

    • Yes, now everything works fine! Thank you so much! Good luck to you! - LADYX