Как изменить механизм появления блока?

355

12 ноября 2017, 18:17

Добрый день! Подскажите, пожалуйста, как правильно изменить механизм появления блока. Сейчас блок .panel появляется когда блок .header весь заходит наверх в невидимую область, а блок .content становится видимым полностью. А прячется блок .panel когда с нижней части экрана только появляется верхний край блока .footer. А вот как сделать так, чтобы блок .panel появлялся тогда, когда блок .content достигал центра экрана по вертикали, а прятался когда блок .footer достигал также центра экрана? При этом все блоки могут быть разной высоты, а блоки .header и .footer называться иначе. Спасибо!

$(function() { 
        $(window).scroll(function(){ 
            var windowScroll = $(window).scrollTop(); 
            var element = $('.content'); 
            var distanceTop = element.offset().top; 
            var distanceHeight = element.offset().top - ($(window).height() - element.height()) 
            if (windowScroll > distanceTop && windowScroll < distanceHeight) 
                $('.panel').animate({'left':'50px'},500); 
            else 
                $('.panel').stop(true).animate({'left':'-50px'},200); 
        }); 
    });

.header { 
height: 1000px; 
background: green; 
} 
.footer { 
height: 1000px; 
background: blue; 
} 
.content { 
height: 3000px; 
} 
.panel { 
width: 50px; 
height: 50px; 
background: chocolate; 
position: fixed; 
top: 45%; 
left: -50px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="header"></div> 
<div class="content"></div> 
<div class="footer"></div> 
<div class="panel"></div>

Answer 1

Например, так:

$(function() { 
  $(window).scroll(function() { 
    var windowScroll = $(window).scrollTop(); 
    var element = $('.content'); 
    var distanceTop = element.offset().top - ($(window).height() / 2); // вычитаем половину высоты экрана 
    var distanceHeight = element.offset().top - ($(window).height() / 2 - element.height()); // вычитаем половину высоты экрана вместо целой высоты экрана 
    if (windowScroll > distanceTop && windowScroll < distanceHeight) 
      $('.panel').animate({ 
        'left': '50px' 
      }, 500); 
    else 
      $('.panel').stop(true).animate({ 
        'left': '-50px' 
      }, 200); 
  }); 
});

.header { 
  height: 1000px; 
  background: green; 
} 
 
.footer { 
  height: 1000px; 
  background: blue; 
} 
 
.content { 
  height: 3000px; 
} 
 
.panel { 
  width: 50px; 
  height: 50px; 
  background: chocolate; 
  position: fixed; 
  top: 45%; 
  left: -50px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="header"></div> 
<div class="content"></div> 
<div class="footer"></div> 
<div class="panel"></div>