I need to create a small window that will come out when I scroll down some number of pixels.
An example can be seen here, but sometimes the window doesn't show, so I also give you a screen shot that captures the example.
You can see that a small window comes out from right side when you scroll down to the bottom. I need to do this exactly as the first link does (with the closing button and all).
This is what I've already written to create the window:
var amountScrolled2 = 3000;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled2 ) {
$('div.banner').fadeIn('slow');
} else {
$('div.banner').fadeOut('slow');
}
});
div.banner {
display: none;
width: 300px;
height: 400px;
background-color:white;
position: fixed;
z-index: 999;
right: 0px;
bottom: 120px;
text-align: center;
padding: 0;
border:1px solid #ddd;
border-right:none;
padding:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="banner hidden-xs">
<h3 style="color:black;font-size:22px;"><span class="blink"><b>DID YOU READ THIS?</b></span></h3>
<h3 style="color:black;text-align:left;font-size:20px;">New Cat Specie Found!</h3>
<p style="color:black;text-align:left;"><i class="fa fa-quote-left fa-pull-left fa-border" aria-hidden="true"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat... <a href="" style="color:black;">READ MORE</a></p>
<p style="text-align:left;"><img src="images/professor1.jpg" class="img-circle" width="25" height="25"> John Wotson. Professor,<br>University of Moratuwa.</p>
</div>
I also want to add a close button, and instead of fade in and fade out, I want the window to open/close from right side. How can I do that, based on what I already have working?
Aucun commentaire:
Enregistrer un commentaire