I decided to make the animation when you hover in the sticky menu. When scroll'e , when the menu is hidden, when you hover over the icon appears the block "Book" , and when you remove the mouse, the block "Book" is hidden.

For this, I wrote a simple script, but it behaves very strangely.

$(document).scroll(function() { if ($(document).scrollTop() > $('header .top_header').outerHeight()) { if ($(' .right_nav .reservations div:last-child').hide(300)) { $(' .right_nav .reservations div:first-child').mouseenter(function() { $(' .right_nav .reservations div:last-child').show(200); }).mouseleave(function() { $(' .right_nav .reservations div:last-child').hide(300); }) } } else { $(' .right_nav .reservations div:last-child').show(200); } }); 
 header { background-color: pink; position: relative; } header .top_header { text-transform: uppercase; width: 100%; position: fixed; z-index: 2; font-family: DINPro-Light, sans-serif; font-size: 1.375em; line-height: 60px; color: #fff; transition: all 0.4s ease; margin: 0; } header .top_header .left_nav { float: left; } header .top_header .left_nav .menu { display: inline-block; background-color: grey; cursor: pointer; margin-right: -6px; max-width: 60px; padding: 0 12px; } header .top_header .left_nav .menu img { padding: 0 8px; width: 55px; } header .top_header .left_nav .tel { background-color: rgba(0, 0, 0, 0.5); display: inline-block; padding: 0 16px; } header .top_header .right_nav { float: right; } header .top_header .right_nav .reservations { background-color: #cba673; display: inline-flex; margin-right: -6px; cursor: pointer; } header .top_header .right_nav .reservations div { vertical-align: middle; white-space: nowrap; height: 60px !important; cursor: pointer; padding: 0 20px; } header .top_header .right_nav .reservations div:last-child { margin-left: 0; padding-right: 18px; } header .top_header .right_nav .language { margin-left: -6px; width: 60px; padding: 0 9px; display: inline-block; background-color: blue; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <div class="top_header"> <div class="left_nav"> <div class="menu"> ||| </div> <div class="tel"> +38 097 060 05 57 </div> </div> <div class="right_nav"> <div class="reservations"> <div>[|||]</div> <div>Забронировать</div> </div> <div class="language"> Eng </div> </div> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> </div> </header>

Why is this happening and how can this be solved?

Codepen example

    1 answer 1

    The thing is, you didn’t hang mouseenter on the whole yellow block ( .reservations ) but on the icon ( .reservations div:first-child ). What happens as a result of:

    1. As soon as you hover the mouse on the icon - it leaves from under the mouse.

    2. As soon as she left under the mouse, the mouseleave triggered and the icon travels back.

    3. As soon as the icon has reached the mouse, the mouseenter works mouseenter and everything repeats from point 1.

    What you need to do is hang all the events on the whole yellow block ( .reservations )

      $(' .right_nav .reservations').hover(function() { //mouseenter $(' .right_nav .reservations div:last-child').show(200); },function() { //mouseleave $(' .right_nav .reservations div:last-child').hide(300); }) 

     $(document).scroll(function() { if ($(document).scrollTop() > $('header .top_header').outerHeight()) { if ($(' .right_nav .reservations div:last-child').hide(300)) { $(' .right_nav .reservations').hover(function() { $(' .right_nav .reservations div:last-child').show(200); },function() { $(' .right_nav .reservations div:last-child').hide(300); }) } } else { $(' .right_nav .reservations div:last-child').show(200); } }); 
     header { background-color: pink; position: relative; } header .top_header { text-transform: uppercase; width: 100%; position: fixed; z-index: 2; font-family: DINPro-Light, sans-serif; font-size: 1.375em; line-height: 60px; color: #fff; transition: all 0.4s ease; margin: 0; } header .top_header .left_nav { float: left; } header .top_header .left_nav .menu { display: inline-block; background-color: grey; cursor: pointer; margin-right: -6px; max-width: 60px; padding: 0 12px; } header .top_header .left_nav .menu img { padding: 0 8px; width: 55px; } header .top_header .left_nav .tel { background-color: rgba(0, 0, 0, 0.5); display: inline-block; padding: 0 16px; } header .top_header .right_nav { float: right; } header .top_header .right_nav .reservations { background-color: #cba673; display: inline-flex; margin-right: -6px; cursor: pointer; } header .top_header .right_nav .reservations div { vertical-align: middle; white-space: nowrap; height: 60px !important; cursor: pointer; padding: 0 20px; } header .top_header .right_nav .reservations div:last-child { margin-left: 0; padding-right: 18px; } header .top_header .right_nav .language { margin-left: -6px; width: 60px; padding: 0 9px; display: inline-block; background-color: blue; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <div class="top_header"> <div class="left_nav"> <div class="menu"> ||| </div> </div> <div class="right_nav"> <div class="reservations"> <div>[|||]</div> <div>Забронировать</div> </div> <div class="language"> Eng </div> </div> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> </div> </header>