Skip to content

Instantly share code, notes, and snippets.

@webkenny
Last active August 29, 2015 14:09
Show Gist options
  • Save webkenny/bbf1846afaab3a8f8c5d to your computer and use it in GitHub Desktop.
Save webkenny/bbf1846afaab3a8f8c5d to your computer and use it in GitHub Desktop.
Link Pinned to Bottom of a Window on Scroll (Drupal 7 Javascript)
/*
Creates a behavior where a link will pin to the bottom of a screen out of a menu
when the scroll reaches 80 pixels or more. When the scroll goes below 80, it
resets.
Things you can (and should) edit:
- The scrollTop variable. When do you want to create the pinning effect?
- The class of your menu link
- Any CSS properties you want to set for the new element.
This JavaScript can be used outside of Drupal 7 as well. Simply copy everything between the second bracket (attach:function)
*/
Drupal.behaviors.contactFollow = {
attach: function(context, settings) {
// Get the position of our link.
var position = $('.menu-item-class').offset();
// Set a moved variable so we don't move things again.
var moved = false;
$(window).scroll(function () {
if($(document).scrollTop() != 0){
// Move the link into position.
$('.menu-item-class').css({
top: "auto",
right: "auto",
left: position.left, // We do this to maintain the element's X position.
bottom: "0",
position: "fixed",
display: "block",
"background-color": "#3495d5",
"border-top": "1px solid white",
"border-right": "1px solid white",
"border-left": "1px solid white",
"border-top-right-radius": "3px",
"border-top-left-radius": "3px"
});
$('.menu-item-class').css({
color: "white",
"background-image": 'url("/icon-scrolled.svg")'
});
// If we are below the threshold, remove added styles.
} else {
$('.menu-item-class').removeAttr('style');
$('.menu-item-class').removeAttr('style');
}
});
}
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment