Skip to content

Instantly share code, notes, and snippets.

@jpmarchand jpmarchand/add-sticky-message.css Secret
Last active Nov 6, 2015

Embed
What would you like to do?
Add a sticky message to any Genesis child theme. Source: http://briangardner.com/genesis-sticky-message/
/* Sticky Message */
.sticky-message {
background-color: #333;
font-size: 16px;
opacity: 0;
padding-bottom: 20px;
padding-top: 20px;
position: fixed;
text-align: center;
width: 100%;
z-index: 999;
}
.sticky-message {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.sticky-message.reveal {
opacity: 1;
}
.sticky-message, .sticky-message a:hover, .sticky-message p {
color: #fff;
}
.sticky-message a {
color: #999;
}
.sticky-message p:last-child {
margin-bottom: 0;
}
<?php
//* Register sticky message widget area
genesis_register_sidebar( array(
'id' => 'sticky-message',
'name' => __( 'Sticky Message', 'bg-mobile-first' ),
'description' => __( 'This is the sticky message widget area.', 'bg-mobile-first' ),
) );
//* Hook sticky message before site header
add_action( 'genesis_before', 'mobile_first_sticky_message' );
function mobile_first_sticky_message() {
genesis_widget_area( 'sticky-message', array(
'before' => '<div class="sticky-message">',
'after' => '</div>',
) );
}
//* Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'mobile_first_sticky_message_scripts' );
function mobile_first_sticky_message_scripts() {
wp_enqueue_script( 'mobile-first-sticky-message', get_bloginfo( 'stylesheet_directory' ) . '/js/sticky-message.js', array( 'jquery' ), '1.0.0' );
}
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");
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.