javascript - 无法关闭 Genesis 主题中的粘滞消息

Question

请看x网站的置顶贴。当您单击关闭按钮时，页面会转到顶部，向下滚动时粘性消息会返回。知道如何解决这个问题吗？我在 functions.php 和必要的 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;
}

Answer 1

将以下 script 行和 CSS 添加到您的代码中。我假设关闭标记将 dismiss 类作为静态类。

CSS

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

脚本

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