Scroll Down Bottom Slide Out Box In jQuery

When Scroll down
File Size:56.75 KB
Views Total:265
Last Update:April 12, 2018
Publish Date:April 12, 2018
Official Website:Go to website
License:MIT

we can slide out the contents of a widget area when users are scroll down to the bottom of pages. a popup that shows instantly when the page bottom position. slides out from the right when you are reading the last part of the article. It shows another article from the same category and I thought that it might be something interesting for any blog or website.

How to use :

1.  Add the jQuery from library :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

2. Add jquery script for box slide out in the bottom area :

<script type="text/javascript">
$(function() {
	$(window).scroll(function(){
		var distanceTop = $('#last').offset().top - $(window).height();

		if  ($(window).scrollTop() > distanceTop)
			$('#slidebox').animate({'right':'0px'},300);
		else
			$('#slidebox').stop(true).animate({'right':'-430px'},100);
	});

	$('#slidebox .close').bind('click',function(){
		$(this).parent().remove();
	});
});
</script>

3. Add HTML code in the bottom area footer tag :

<p id="last">
    Some paragraph text
</p>

4. Add slide out box  in html code :

<div id="slidebox">
	<a class="close"></a>
	<p>More in Technology & Science (4 of 23 articles)</p>
	<h2>The Social Impact of Scientific Research and new Technologies</h2>
	<a class="more">Read More »</a>
</div>

Done