Как правильно доработать скрипт?

312
02 ноября 2017, 08:23

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

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

Нужно добавить вот такую проверку:

element.offset().top - ($(window).height() - element.height()
READ ALSO
Почему возвращается объект?
javascript

Почему возвращается объект?

Помогите пожалуйста понять что детально происходит при таком вызове:

 306
Распознавание голоса Web Kit Speech Recognition не работает
javascript

Распознавание голоса Web Kit Speech Recognition не работает

Здравствуйте, я добавил на сайт технологию Web Kit Speech Recognition API, эта технология способна распознавать голосМой сайт находится на локальном сервере,...

 231
PHP качество кода
PHP

PHP качество кода

Есть php код:

 223
Удалить из строки слеши
PHP

Удалить из строки слеши

есть строка

 262