Creates a sticky bar on scroll after set amount of pixels
jQuery(function( $ ){
// Add reveal class to sticky message after 100px
$(document).on("scroll", function(){
if($(document).scrollTop() > 100){
$(".sticky-message").addClass("reveal");
} else {
$(".sticky-message").removeClass("reveal");
}
});
});
.sticky-message {
background-color: #fff;
font-size: 15px;
font-weight: 700;
opacity: 0;
padding: 15px 10px;
/*padding-bottom: 20px;
padding-top: 20px;*/
position: fixed;
text-align: center;
width: 100%;
z-index: 999;
box-shadow: 0 0 5px #ddd;
}
.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: #222;
}
.sticky-message a {
color: #ff4800;
}
.sticky-message p:last-child {
margin-bottom: 0;
}
.sticky-message {
/* stuff */
opacity: 0;
z-index: -1;
}
.sticky-message.reveal {
/* stuff */
opacity: 1;
z-index: 999;
}
.sticky-message p:last-child {
margin-bottom: 0px;
}
.sticky-message.reveal{
top:0;
}
section#text-26 {
margin-bottom: 0px;
}
//* 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-stickey-message', get_bloginfo( 'stylesheet_directory' ) . '/js/sticky-message.js', array( 'jquery' ), '1.0.0' );
}