jquery.smint.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. /*
  2. SMINT V1.0 by Robert McCracken
  3. SMINT V2.0 by robert McCracken with some awesome help from Ryan Clarke (@clarkieryan) and mcpacosy ‏(@mcpacosy)
  4. SMINT V3.0 by robert McCracken with some awesome help from Ryan Clarke (@clarkieryan) and mcpacosy ‏(@mcpacosy)
  5. SMINT is my first dabble into jQuery plugins!
  6. http://www.outyear.co.uk/smint/
  7. If you like Smint, or have suggestions on how it could be improved, send me a tweet @rabmyself
  8. */
  9. (function(){
  10. $.fn.smint = function( options ) {
  11. var settings = $.extend({
  12. 'scrollSpeed' : 300,
  13. 'mySelector' : 'div',
  14. 'smintClass':'smint'
  15. }, options);
  16. // adding a class to users div
  17. $(this).addClass(settings.smintClass);
  18. //Set the variables needed
  19. var optionLocs = new Array(),
  20. lastScrollTop = 0,
  21. menuHeight = $(".smint").height(),
  22. smint = $('.'+settings.smintClass),
  23. smintA = $('.'+settings.smintClass+' a'),
  24. myOffset = smint.height();
  25. if ( settings.scrollSpeed ) {
  26. var scrollSpeed = settings.scrollSpeed
  27. }
  28. if ( settings.mySelector ) {
  29. var mySelector = settings.mySelector
  30. };
  31. if(settings.position){
  32. var position = settings.position;
  33. }
  34. return smintA.each( function(index) {
  35. var id = $(this).attr('href').split('#')[1];
  36. if (!$(this).hasClass("extLink")) {
  37. $(this).attr('id', id);
  38. }
  39. if(id==undefined){
  40. return;
  41. }
  42. //Fill the menu
  43. optionLocs.push(Array(
  44. $(mySelector+"."+id).position().top-menuHeight,
  45. $(mySelector+"."+id).height()+$(mySelector+"."+id).position().top, id)
  46. );
  47. ///////////////////////////////////
  48. // get initial top offset for the menu
  49. var stickyTop = smint.offset().top;
  50. // check position and make sticky if needed
  51. var stickyMenu = function(direction){
  52. // current distance top
  53. var scrollTop = $(window).scrollTop()+myOffset;
  54. // console.log(scrollTop)
  55. // 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
  56. if (scrollTop > stickyTop+myOffset) {
  57. smint.css({ 'position': position, 'top':0,'left':0 }).addClass('fxd');
  58. // add padding to the body to make up for the loss in heigt when the menu goes to a fixed position.
  59. // When an item is fixed, its removed from the flow so its height doesnt impact the other items on the page
  60. if(smint.is(':visible')){
  61. $('body').css('padding-top', menuHeight );
  62. }
  63. } else {
  64. smint.css( 'position', 'relative').removeClass('fxd');
  65. //remove the padding we added.
  66. $('body').css('padding-top', '0' );
  67. }
  68. // Check if the position is inside then change the menu
  69. // Courtesy of Ryan Clarke (@clarkieryan)
  70. if(optionLocs[index][0] <= scrollTop && scrollTop <= optionLocs[index][1]){
  71. if(direction == "up"){
  72. $("#"+id).addClass("active");
  73. if(optionLocs[index+1]) {
  74. $("#" + optionLocs[index + 1][2]).removeClass("active");
  75. }
  76. } else if(index > 0) {
  77. $("#"+id).addClass("active");
  78. $("#"+optionLocs[index-1][2]).removeClass("active");
  79. } else if(direction == undefined){
  80. $("#"+id).addClass("active");
  81. }
  82. $.each(optionLocs, function(i){
  83. if(id != optionLocs[i][2]){
  84. $("#"+optionLocs[i][2]).removeClass("active");
  85. }
  86. });
  87. }
  88. };
  89. // run functions
  90. stickyMenu();
  91. // run function every time you scroll
  92. $(window).scroll(function() {
  93. //Get the direction of scroll
  94. var st = $(this).scrollTop()+myOffset;
  95. if (st > lastScrollTop) {
  96. direction = "down";
  97. } else if (st < lastScrollTop ){
  98. direction = "up";
  99. }
  100. lastScrollTop = st;
  101. stickyMenu(direction);
  102. // Check if at bottom of page, if so, add class to last <a> as sometimes the last div
  103. // isnt long enough to scroll to the top of the page and trigger the active state.
  104. if($(window).scrollTop() + $(window).height() == $(document).height()) {
  105. smintA.removeClass('active')
  106. $(".smint a:not('.extLink'):last").addClass('active')
  107. } else {
  108. smintA.last().removeClass('active')
  109. }
  110. });
  111. ///////////////////////////////////////
  112. $(this).on('click', function(e){
  113. // 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
  114. var myOffset = smint.height();
  115. // stops hrefs making the page jump when clicked
  116. e.preventDefault();
  117. // get the hash of the button you just clicked
  118. var hash = $(this).attr('href').split('#')[1];
  119. var goTo = $(mySelector+'.'+ hash).offset().top-myOffset;
  120. // Scroll the page to the desired position!
  121. $("html, body").stop().animate({ scrollTop: goTo }, scrollSpeed);
  122. // if the link has the '.extLink' class it will be ignored
  123. // Courtesy of mcpacosy ‏(@mcpacosy)
  124. if ($(this).hasClass("extLink"))
  125. {
  126. return false;
  127. }
  128. });
  129. //This lets yo use links in body text to scroll. Just add the class 'intLink' to your button and it will scroll
  130. $('.intLink').on('click', function(e){
  131. var myOffset = smint.height();
  132. e.preventDefault();
  133. var hash = $(this).attr('href').split('#')[1];
  134. if (smint.hasClass('fxd')) {
  135. var goTo = $(mySelector+'.'+ hash).position().top-myOffset;
  136. } else {
  137. var goTo = $(mySelector+'.'+ hash).position().top-myOffset*2;
  138. }
  139. $("html, body").stop().animate({ scrollTop: goTo }, scrollSpeed);
  140. if ($(this).hasClass("extLink"))
  141. {
  142. return false;
  143. }
  144. });
  145. });
  146. };
  147. $.fn.smint.defaults = { 'scrollSpeed': 500, 'mySelector': 'div','position':'fixed'};
  148. })(jQuery);