| Killswitch |
01-25-2013 02:33 PM |
KILLSWITCH FREEBIE: StickNSlide jQuery plugin.
Hello Ladies and Entleman.
Today, I am sharing a little jQuery plugin I wrote, basically what it does is takes any element you attach it to, and makes it scroll with the window.
Here's the plugin, just save it to a new file, and name it sticknslide.js and include it on your page like you normally would.
Code:
/**
* StickNSlide
*
* Stick shit and watch it slide down your screen.
* By Killswitch - http://www.pronemedia.com
*
*/
(function(e){e.fn.sticknslide=function(t){var n={fromTheTop:0};t=e.extend(n,t);var r=e(this);if(!r.length){return}var i=r.offset().top;var s=r.width()+"px";var o=e('<div class="sticknslide"></div>');var u=e(window);var a=e(document);u.scroll(function(){var e=u.scrollTop();if(e+t.fromTheTop+r.height()<a.height()-u.height()&&e+t.fromTheTop>r.offset().top){r.css({position:"fixed",width:s,top:t.fromTheTop+"px"});o.css({width:s,height:r.height()});r.before(o)}else if(e+t.fromTheTop<i){o.remove();r.css({position:"static",width:s,top:""})}})}})(jQuery)
Then just attach it to whatever element you want to scroll with like so:
Code:
$('#myelement').sticknslide();
Here's an example of it: http://jsfiddle.net/Killswitch/T37Tq/show/
Hope you enjoy, and keep on keeping on hombres. :thumbsup |
