This tutorial covers the steps for setting up a custom widget area that slides into view from the bottom of the browser window on page load and remains in view until the user closes it similar to that on Copyblogger.com.
We shall use js-cookie to create a cookie in the user's browser once the close button is clicked and set it to expire after a week. Only if the cookie has not been set will the slide-in section appear.
In this example, we are going to display a horizontal opt-in form using Genesis eNews Extended.
Screenshot:
Screencast:
Step 1
Upload js.cookie.js to your child theme's js directory.
Create a file named say, global.js in the same location having the following:
Hi Sridhar
Is there a way to have this appear only when you scroll past a certain point on the page?
Thanks
Dom
Figured it out with this from StackOverflow added into global.js – sets the number of pixels from the top of the page before the slide-in appears – https://stackoverflow.com/questions/13195048/show-div-after-scrolling-100px-from-the-top-of-the-page
$(“#divname”).hide();
$(window).scroll(function() {
if ($(window).scrollTop() > 100) { //change this to number of pixels from top you desire
$(“#divname”).fadeIn(“slow”);
}
else {
$(“#divname”).fadeOut(“fast”);
}
});