JSFiddle - React, Tailwind, and code Playground

by hslincoln

HTML

example url:
http://jmldirect.uat.venda.com/uk/at-home/icat/5athome

JavaScript

jQuery(document).ready(function () {
    console.log(jQuery.cookie('stickyNewsClosed'));

    if (jQuery.cookie('stickyNewsClosed') === undefined) {
        jQuery('.stickyFooter').show();
    } else if (jQuery.cookie('stickyNewsClosed') !== null) {
        jQuery('.stickyFooter').hide();
    }



    // check if both divs are visible
    if ((jQuery('.footerPromoBannerWrapper').is(':visible')) && (jQuery('.stickyFooter').is(':visible'))) {

        // Local variable for cancel of fades
        var stickyTimeout;

        // Set sticky as display:none
        jQuery('.stickyFooter').hide();

        // Switch in
        window.switchIn = function () {
            jQuery('.footerPromoBannerWrapper').fadeToggle(function () {
                jQuery('.stickyFooter').fadeToggle(function () {
                    stickyTimeout = setTimeout(function () {
                        window.switchOut();
                    }, 3000);
                });
            });
        };

        // Switch out
        window.switchOut = function () {
            jQuery('.stickyFooter').fadeToggle(function () {
                jQuery('.footerPromoBannerWrapper').fadeToggle(function () {
                    stickyTimeout = setTimeout(function () {
                        window.switchIn();
                    }, 3000);
                });
            });
        };

        stickyTimeout = setTimeout(function () {
            window.switchIn();
        }, 5000);

    } // End of both divs are visible if statement

    function stopAnimation() {
        jQuery('input#emailsignup').focus(function () {
            clearTimeout(stickyTimeout);
        });
    } // End stopAnimation function 

    function closeSticky() {
        jQuery('.stickyFooter').hide();
        jQuery.cookie('stickyNewsClosed', 'yup', {
            path: '/',
            expires: 30
        });
        stopAnimation();
    }
});