Search code examples
javascriptjquerycsswordpressgenesis

Can't dismiss sticky message in Genesis theme


Please look at the sticky message on website x. When you click on the dismiss button, the page goes to the top and the sticky message is coming back when scrolling down. Any idea how to resolve this issue? I have added the script below in functions.php and the necessary javascript/CSS.

// Enqueue Scripts and Styles.
add_action( 'wp_enqueue_scripts', 'oc_enqueue_scripts_styles' );
function oc_enqueue_scripts_styles() {

    wp_enqueue_script( 'oc_sticky_message', get_bloginfo( 'stylesheet_directory' ) . '/js/sticky-message.js', array( 'jquery' ), '1.0.0' );
}

//* Register widget areas
genesis_register_sidebar( array(
    'id'          => 'sticky-message',
    'name'        => __( 'Sticky Message', 'oc' ),
    'description' => __( 'This is the sticky message section.', 'oc' ),
) );

// Add markup for the sticky message.
add_action( 'genesis_before', 'oc_sticky_message' );
function oc_sticky_message() {

    genesis_widget_area( 'sticky-message', array(
        'before' => '<div class="sticky-message">',
        'after'  => '<a class="dismiss dashicons dashicons-no-alt" href="#"><span class="screen-reader-text">Dismiss</span></a></div></div>',
    ) );
}
jQuery(function($) {
    // Add reveal class to sticky message after 100px
    $(document).on("scroll", function() {
        if ($(document).scrollTop() > 100) { // Revealed after a person has scrolled 100px down
            $(".sticky-message").addClass("reveal");
        } else {
            $(".sticky-message").removeClass("reveal");
        }
    });
    $('.sticky-message a.dismiss').click(function(e){
        e.preventDefault();
        $(this).parents(".sticky-message").addClass("hard-close");
    });
});
.hard-close {
      display:none !important;
}

Solution

  • Add the following script lines and CSS to your code. I assumed that the close tag has the dismiss class as a static one.

    CSS

    .hard-close{
      display:none !important;
    }
    

    SCRIPT

    $('.sticky-message a.dismiss').click(function(e){
      e.preventDefault();
      $(this).parents(".sticky-message").addClass("hard-close");
    });