Are you first timer at lazacode.org? Why not join us and start exchange your programming knowledge with everyone. Register today!

UI - slide up element upon scroll

0 votes
21 views
added Feb 14 in UI by LC Marshal Lieutenant (16,990 points)

<html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://www.edgeprop.my/sites/all/themes/markone/assets/css/live/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<div class="site-content">Site content</div>
		<div class="site-content">Site content</div>
		<div class="site-content">Site content</div>
		<div class="site-content">Site content</div>
		<div class="site-content">Site content</div>
		<div class="site-content">Site content</div>
		<div class="site-content">Site content</div>
		<div class="site-content">Site content</div>
		<div class="site-content">Site content</div>
		<div class="ads">ad here</div>
		<div class="site-content">Site content</div>
		
	</div>
	

</body>
</html>
<style>
.site-content {
    height:200px;
    width: 100%;
    max-width: 300px;
    background: #eee;
    margin-bottom: 20px;
    display: block;
}
.ads {
	width: 100%;
	max-width: 300px;
	height: 100vh;
	background: #222;
	position: fixed;
	top: 160%;
	transition: all .5s .2s ease-in-out;
}
.stick {
	/*left: 0;*/
	top: 0;
    transition: all .5s .2s ease-in-out;
}
</style>
<script>

	$(document).on('scroll', function() {
	    // if( $(this).scrollTop() >= $('.ads').position().top ){
	    //     $('.ads').show();
	    //     // $('.ads').addClass('stick');
	    //     console.log('show ads here');
	    // }
	    if ($(window).scrollTop() >= 350) {
	       $('.ads').addClass('stick');
	       console.log('test');
	    }
	});

	
</script>





 

Please log in or register to response this reference.

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...