<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.yoursitename.com/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>