Namal Isuru Lanka Namal Isuru Lanka - 5 months ago 13
Javascript Question

how to create a small window coming out when scrolling down?

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. If the user clicks the close button, the banner banner should remain hidden regardless of scroll position, and remain so until the page is refreshed. If the user scrolls back up, the banner should automatically hide itself when it reaches the threshold scroll position, and remain able to be displayed again if the user scrolls back down.

How can I do that, based on what I already have working?

Answer

Based on your jsFiddle example, I have added the functionality that you asked about. The following code shows how this works:

var amountScrolled2 = 300;
var bannerClosed = false;
var banner = $('div.banner');
var close = $("span#close");

$(window).scroll(function() {
    if (!bannerClosed && !banner.hasClass('popout') && $(window).scrollTop() > amountScrolled2) {
    	banner.addClass('popout');
        banner.animate({
            right: 0
        }, {
            duration: 'slow',
            complete: function() {
                close.click(function() {
                    bannerClosed = true;
                	closeBanner();
                });
	        }
    	});
    } else if (banner.hasClass('popout') && $(window).scrollTop() < amountScrolled2) {
    	closeBanner();
    }
});

function closeBanner() {
    banner.animate({ right: -340 }, 'fast');
    $(this).unbind("click");
    banner.removeClass('popout');
}
div.banner {
  width: 300px;
  height: 400px;
  background-color:white;
  position: fixed;
  z-index: 999;
  right: -340px;
  bottom: 120px;
  text-align: center;
  padding: 0;
  border:1px solid #ddd;
  border-right:none;
  padding:20px;
}

div.banner > span#close {
    position: absolute;
    left: 0;
    top: 0;
    padding: 5px;
    color: red;
}

div.banner > span#close:hover {
    background-color: red;
    color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
sasasasas
</p>
<p>
sasasasas
</p>
<p>
sasasasas
</p>
<p>
sasasasas
</p>
<p>
sasasasas
</p>
<p>
sasasasas
</p>
<p>
sasasasas
</p>
<p>
sasasasas
</p>
<p>
sasasasas
</p>
<p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p><p>
sasasasas
</p>
<div class="banner hidden-xs">
        <span id="close">X</span>
        <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>

Given that the banner is using fixed positioning, it's better to try the example in full screen - click the "Full Page" button to do this.

There is also an updated jsFiddle that shows this code in action: https://jsfiddle.net/mgaskill/poss9x4o/

How is this accomplished? There are a few steps involved. First, it's important to ensure that the effect doesn't occur while it's already happened, because the asynchronous nature of the effect means that each scroll event will effectively interrupt (or interleave) the effect. We use the popout class to indicate that the banner has been popped out, and is visible to the user.

Next, we add the "close" button as a simple span with an "X" in it, and customize the span styling to look and act like a close button. This includes placing a hover style, as well, to visually indicate to the user that this is an active element.

The styles for the banner are modified slightly to leave the banner visible, but offscreen, enabling the 'slide' effect to work without having to also worry about toggling the display. The initial right position of the banner is now -340px, which will leave the banner completely offscreen (based on its width.

Following that, we handle the events. Once the banner is "safe" to deploy, we use the jQuery animate method to transition the right of the element from its initial position to "0", which in effect, slides the banner from the right of the screen. Once the banner is visible, we install the click handler for the close button.

The close button handler will quickly slide the banner out to the right, hiding it. In addition, the close button click handler is uninstalled (cleanup), and the popout class is removed from the banner.

If the page is scrolled up while the banner is displayed, the banner will be hidden again until the page is scrolled back down. The amount of scrolling required to reach the threshold is set in the amountScrolled2 variable. If the user closes the banner by clicking the 'X', the banner will no longer become visible by scrolling until the page is refreshed.

Comments