Cacher is the code snippet organizer for pro developers

jQuery(document).ready(function($) {

    // click event for .sticky-switch.
    $('.sticky-switch').click(function(event) {
        // stop the click on the link adding a # to the end of URL
        event.preventDefault();

        $(this).parents('#side-container').toggleClass('open');

    });

    // Close if user clicks outside of panel.
    $(document).click(function(event) {
        if(!$(event.target).closest('#side-container').length) {
        // ... clicked on the 'body', but not inside of #side-container
            if($('#side-container').hasClass('open')) {
                $('#side-container').removeClass('open');
            }
        }
    });

    // Close the side panel after Submit button inside #side-section has been clicked.
    $('#side-section input[type="submit"]').click(function(event) {
        $('#side-container').removeClass('open');
    });

});

// Register side-sticky widget area.
genesis_register_widget_area(
    array(
        'id'          => 'side-sticky',
        'name'        => __( 'Side Sticky', 'my-theme-text-domain' ),
        'description' => __( 'This appears in the sticky side section.', 'my-theme-text-domain' ),
    )
);

add_action( 'wp_footer', 'sk_side_sticky' );
/**
 * Display sticky side section.
 */
function sk_side_sticky() {
    // if there is no widget in the Side Sticky widget area, abort.
    if ( ! is_active_sidebar( 'side-sticky' ) ) {
        return;
    } ?>

    <div id="side-container">
        <div id="side-section">
            <?php
            genesis_widget_area( 'side-sticky', array(
                'before'    => '<div class="side-sticky widget-area">',
                'after'     => '</div>',
            ) ); ?>
        </div>
        <div id="side-sticky-button"><a class="sticky-switch" href="#"><?php echo __( 'Subscribe', 'my-theme-text-domain' ); ?></a></div>
    </div>
<?php }

add_action( 'wp_enqueue_scripts', 'enqueue_side_sticky' );
/**
 * Load side-sticky.js.
 */
function enqueue_side_sticky() {
    // if there is no widget in the Side Sticky widget area, abort.
    if ( ! is_active_sidebar( 'side-sticky' ) ) {
        return;
    }

    wp_enqueue_script( 'side-sticky',  get_stylesheet_directory_uri() . '/js/side-sticky.js', array( 'jquery' ), '1.0.0', true );
}

#side-container {
    position: fixed;
    left: 0;
    top: 50%;
    -webkit-transform: translate(-400px, -30%);
    transform: translate(-400px, -30%);
    -webkit-transition: transform 0.4s ease-in-out;
    -webkit-transition: -webkit-transform 0.4s ease-in-out;
    transition: -webkit-transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
    transition:         transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
    z-index: 1000;
    background-color: #003643;
    color: #fafafa;
}

#side-container.open {
    -webkit-transform: translate(0, -30%);
    transform: translate(0, -30%);
}

#side-section {
    padding: 40px;
    width: 400px;
    min-height: 180px;
}

#side-section .widget-title {
    font-size: 22px;
    text-transform: uppercase;
}

#side-section .enews input {
    padding: 10px;
}

#side-section .enews p {
    font-size: 17px;
}

#side-section input[type="submit"] {
    background-color: #c9a255;
    text-transform: uppercase;
}

#side-section li a {
    color: #fafafa;
    text-decoration: none;
}

#side-section li a:hover {
    color: #fff;
}

#side-section p:last-child {
    margin-bottom: 0;
}

#side-sticky-button {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    -webkit-transform-origin: right top 0;
            transform-origin: right top 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #003643;
    color: #fff;
    width: 180px;
    text-align: center;
}

a.sticky-switch {
    display: block;
    padding: 10px 30px;
    color: #c5a651;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 1.5px;
}

a.sticky-switch:focus {
    outline: none;
}

@media only screen and (max-width: 500px) {

    #side-section {
        width: auto;
    }

    #side-container {
        position: static;
        -webkit-transform: none;
        transform: none;
        background-color: #003643;
        color: #fafafa;
    }

    #side-container.open {
        -webkit-transform: none;
        transform: none;
    }

    a.sticky-switch {
        display: none;
    }

}