Skip to content

Instantly share code, notes, and snippets.

@braddalton
Last active April 19, 2017 05:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save braddalton/d051154cbfbeecc0a0d7ae1d3bbc4ed7 to your computer and use it in GitHub Desktop.
Save braddalton/d051154cbfbeecc0a0d7ae1d3bbc4ed7 to your computer and use it in GitHub Desktop.
Add Sticky Message To Infinity Pro Theme With Sticky Nav Menu https://wp.me/p1lTu0-gPm
genesis_register_sidebar( array(
'id' => 'sticky-message',
'name' => __( 'Sticky Message', 'infinity-pro' ),
'description' => __( 'This is the sticky message widget area.', 'infinity-pro' ),
) );
add_action( 'genesis_before', 'infinity_pro_sticky_message' );
function infinity_pro_sticky_message() {
genesis_widget_area( 'sticky-message', array(
'before' => '<div class="sticky-message">',
'after' => '</div>',
) );
}
add_action( 'wp_enqueue_scripts', 'infinity_pro_sticky_message_scripts' );
function infinity_pro_sticky_message_scripts() {
wp_enqueue_script( 'infinity-pro-sticky-message', get_bloginfo( 'stylesheet_directory' ) . '/js/sticky.js', array( 'jquery' ), '1.0.0' );
}
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: #333;
font-size: 16px;
opacity: 0;
padding-bottom: 20px;
padding-top: 100px;
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;
}
@media only screen and (max-width: 800px) {
.sticky-message {
padding-top: 20px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment