Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Aug 10th, 2012  |  syntax: None  |  size: 2.96 KB  |  hits: 6  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. How to select the last element on viewport
  2. $(window).scroll(function () {
  3.  
  4. $('.post-content p').removeClass("temp last")
  5. $('.post-content p').filter(":onScreen").addClass("temp")
  6.  
  7. $(".temp").eq(-1).addClass("last")
  8.  
  9.     });
  10.        
  11. // Store the offsets in an array
  12. var offsets = [];
  13. // Cache the elements to select
  14. var elements = $('.elem');
  15. // Cache the window jQuery Object
  16. var jWindow = $(window);
  17. // Cache the calculation of the window height
  18. var jWindowHeight = jWindow.height();
  19. // set up the variable for the current selected offset
  20. var currentOffset;
  21. // set up the variable for the current scrollOffset
  22. var scrollOffset;
  23. // set up the variable for scrolled, set it to true to be able to assign at
  24. // the beginning
  25. var scrolled = true;
  26.  
  27. // function to assign the different elements offsets,
  28. // they don't change on scroll
  29. var assignOffsets = function() {
  30.     elements.each(function() {
  31.         offsets.push({
  32.             offsetTop: $(this).offset().top,
  33.             height: $(this).height(),
  34.             element: $(this)
  35.         });
  36.     });
  37. };
  38.  
  39. // execute the function once. Exectue it again if you added
  40. // or removed elements
  41. assignOffsets();
  42.  
  43. // function to assign a class to the last element
  44. var assignLast = function() {
  45.     // only execute it if the user scrolled
  46.     if (scrolled) {
  47.         // assigning false to scrolled to prevent execution until the user
  48.         // scrolled again
  49.         scrolled = false;
  50.  
  51.         // assign the scrolloffset
  52.         scrollOffset = jWindowHeight + jWindow.scrollTop();
  53.  
  54.         // only execute the function if no current offset is set,
  55.         // or the user scrolled down or up enough for another element to be
  56.         // the last
  57.         if (!currentOffset || currentOffset.offsetTop < scrollOffset || currentOffset.offsetTop + currentOffset.height > scrollOffset) {
  58.  
  59.             // Iterate starting from the bottom
  60.             // change this to positive iteration if the elements count below
  61.             // the fold is higher than above the fold
  62.             for (var i = offsets.length - 1; i >= 0; i--) {
  63.  
  64.                 // if the element is above the fold, reassign the current
  65.                 // element
  66.                 if (offsets[i].offsetTop + offsets[i].height < (scrollOffset)) {
  67.                     currentOffset && (currentOffset.element.removeClass('last'));
  68.                     currentOffset = offsets[i];
  69.                     currentOffset.element.addClass('last');
  70.                     // no further iteration needed and we can break;
  71.                     break;
  72.                 }
  73.             }
  74.             return true;
  75.         } else {
  76.             return false;
  77.         }
  78.     }
  79. }
  80.  
  81. assignLast();
  82.  
  83. // reassign the window height on resize;
  84. jWindow.on('resize', function() {
  85.     jWindowHeight = jWindow.height();
  86. });
  87.  
  88. // scroll handler only doing assignment of scrolled variable to true
  89. jWindow.scroll(function() {
  90.     scrolled = true;
  91. });
  92.  
  93. // set the interval for the handler
  94. setInterval(assignLast, 250);
  95.  
  96. // assigning the classes for the first time
  97. assignLast();