123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209 |
- /*
- SMINT V1.0 by Robert McCracken
- SMINT V2.0 by robert McCracken with some awesome help from Ryan Clarke (@clarkieryan) and mcpacosy (@mcpacosy)
- SMINT V3.0 by robert McCracken with some awesome help from Ryan Clarke (@clarkieryan) and mcpacosy (@mcpacosy)
- SMINT is my first dabble into jQuery plugins!
- http://www.outyear.co.uk/smint/
- If you like Smint, or have suggestions on how it could be improved, send me a tweet @rabmyself
- */
- (function(){
- $.fn.smint = function( options ) {
- var settings = $.extend({
- 'scrollSpeed' : 300,
- 'mySelector' : 'div',
- 'smintClass':'smint'
- }, options);
- // adding a class to users div
- $(this).addClass(settings.smintClass);
-
-
- //Set the variables needed
- var optionLocs = new Array(),
- lastScrollTop = 0,
- menuHeight = $(".smint").height(),
- smint = $('.'+settings.smintClass),
- smintA = $('.'+settings.smintClass+' a'),
- myOffset = smint.height();
-
- if ( settings.scrollSpeed ) {
- var scrollSpeed = settings.scrollSpeed
- }
- if ( settings.mySelector ) {
- var mySelector = settings.mySelector
- };
- if(settings.position){
- var position = settings.position;
- }
- return smintA.each( function(index) {
-
- var id = $(this).attr('href').split('#')[1];
- if (!$(this).hasClass("extLink")) {
- $(this).attr('id', id);
- }
-
- if(id==undefined){
- return;
- }
- //Fill the menu
- optionLocs.push(Array(
- $(mySelector+"."+id).position().top-menuHeight,
- $(mySelector+"."+id).height()+$(mySelector+"."+id).position().top, id)
- );
- ///////////////////////////////////
- // get initial top offset for the menu
- var stickyTop = smint.offset().top;
- // check position and make sticky if needed
- var stickyMenu = function(direction){
- // current distance top
- var scrollTop = $(window).scrollTop()+myOffset;
- // console.log(scrollTop)
- // if we scroll more than the navigation, change its position to fixed and add class 'fxd', otherwise change it back to absolute and remove the class
- if (scrollTop > stickyTop+myOffset) {
- smint.css({ 'position': position, 'top':0,'left':0 }).addClass('fxd');
- // add padding to the body to make up for the loss in heigt when the menu goes to a fixed position.
- // When an item is fixed, its removed from the flow so its height doesnt impact the other items on the page
- if(smint.is(':visible')){
- $('body').css('padding-top', menuHeight );
- }
- } else {
- smint.css( 'position', 'relative').removeClass('fxd');
- //remove the padding we added.
- $('body').css('padding-top', '0' );
- }
- // Check if the position is inside then change the menu
- // Courtesy of Ryan Clarke (@clarkieryan)
- if(optionLocs[index][0] <= scrollTop && scrollTop <= optionLocs[index][1]){
- if(direction == "up"){
- $("#"+id).addClass("active");
- if(optionLocs[index+1]) {
- $("#" + optionLocs[index + 1][2]).removeClass("active");
- }
- } else if(index > 0) {
- $("#"+id).addClass("active");
- $("#"+optionLocs[index-1][2]).removeClass("active");
- } else if(direction == undefined){
- $("#"+id).addClass("active");
- }
- $.each(optionLocs, function(i){
- if(id != optionLocs[i][2]){
-
- $("#"+optionLocs[i][2]).removeClass("active");
- }
- });
- }
- };
- // run functions
- stickyMenu();
- // run function every time you scroll
- $(window).scroll(function() {
- //Get the direction of scroll
- var st = $(this).scrollTop()+myOffset;
- if (st > lastScrollTop) {
- direction = "down";
- } else if (st < lastScrollTop ){
- direction = "up";
- }
- lastScrollTop = st;
- stickyMenu(direction);
- // Check if at bottom of page, if so, add class to last <a> as sometimes the last div
- // isnt long enough to scroll to the top of the page and trigger the active state.
- if($(window).scrollTop() + $(window).height() == $(document).height()) {
- smintA.removeClass('active')
- $(".smint a:not('.extLink'):last").addClass('active')
-
- } else {
- smintA.last().removeClass('active')
- }
- });
- ///////////////////////////////////////
-
- $(this).on('click', function(e){
- // gets the height of the users div. This is used for off-setting the scroll so the menu doesnt overlap any content in the div they jst scrolled to
- var myOffset = smint.height();
- // stops hrefs making the page jump when clicked
- e.preventDefault();
-
- // get the hash of the button you just clicked
- var hash = $(this).attr('href').split('#')[1];
-
- var goTo = $(mySelector+'.'+ hash).offset().top-myOffset;
-
- // Scroll the page to the desired position!
- $("html, body").stop().animate({ scrollTop: goTo }, scrollSpeed);
-
- // if the link has the '.extLink' class it will be ignored
- // Courtesy of mcpacosy (@mcpacosy)
- if ($(this).hasClass("extLink"))
- {
- return false;
- }
- });
- //This lets yo use links in body text to scroll. Just add the class 'intLink' to your button and it will scroll
- $('.intLink').on('click', function(e){
- var myOffset = smint.height();
- e.preventDefault();
-
- var hash = $(this).attr('href').split('#')[1];
- if (smint.hasClass('fxd')) {
- var goTo = $(mySelector+'.'+ hash).position().top-myOffset;
- } else {
- var goTo = $(mySelector+'.'+ hash).position().top-myOffset*2;
- }
-
- $("html, body").stop().animate({ scrollTop: goTo }, scrollSpeed);
- if ($(this).hasClass("extLink"))
- {
- return false;
- }
- });
- });
- };
- $.fn.smint.defaults = { 'scrollSpeed': 500, 'mySelector': 'div','position':'fixed'};
- })(jQuery);
|