Last active
August 29, 2015 14:09
-
-
Save webkenny/bbf1846afaab3a8f8c5d to your computer and use it in GitHub Desktop.
Link Pinned to Bottom of a Window on Scroll (Drupal 7 Javascript)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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