feat(sticky): add option to select a different triggering element [hasTests] [mergeMe]

src/shortcuts/sticky.js

@@ -18,7 +18,7 @@
     var originalHandler = this.options.handler
 
     this.waypoint = new Waypoint($.extend({}, this.options, {
-      element: this.wrapper,
+      element: this.options.triggerElement || this.wrapper,
       handler: $.proxy(function(direction) {
         var shouldBeStuck = this.options.direction.indexOf(direction) > -1
         var wrapperHeight = shouldBeStuck ? this.$element.outerHeight(true) : ''
@@ -56,7 +56,8 @@
   Sticky.defaults = {
     wrapper: '<div class="sticky-wrapper" />',
     stuckClass: 'stuck',
-    direction: 'down right'
+    direction: 'down right',
+    triggerElement: false
   }
 
   Waypoint.Sticky = Sticky

test/fixtures/sticky.html

@@ -1,10 +1,12 @@
 <div class="wp-container">
   <div class="before"></div>
   <div class="sticky"></div>
+  <div class="triggerElement"></div>
 </div>
 
 <style type="text/css">
   .wp-container {
+    position: relative;
     height:3000px;
   }
 
@@ -15,4 +17,8 @@
   .sticky {
     height:50px;
   }
-</style>
+  .triggerElement {
+    position: absolute;
+    top: 1000px;
+  }
+</style>

test/sticky-spec.js

@@ -7,11 +7,12 @@
 describe('Waypoint Sticky Shortcut', function() {
   var $ = window.jQuery
   var $scroller = $(window)
-  var $sticky, waypoint, handlerSpy
+  var $sticky, $triggerElement, waypoint, handlerSpy
 
   beforeEach(function() {
     loadFixtures('sticky.html')
     $sticky = $('.sticky')
+    $triggerElement = $('.triggerElement')
   })
 
   describe('with default options', function() {
@@ -114,4 +115,31 @@ describe('Waypoint Sticky Shortcut', function() {
       expect(parent).toBe(waypoint.wrapper)
     })
   })
+
+  describe('with triggerElement', function() {
+    beforeEach(function() {
+      waypoint = new Waypoint.Sticky({
+        element: $sticky[0],
+        triggerElement: $triggerElement[0]
+      })
+    })
+    afterEach(function() {
+      waypoint.destroy()
+    })
+
+    it('when scrolling', function() {
+      runs(function() {
+        $scroller.scrollTop($triggerElement.offset().top)
+      })
+      waitsFor(function() {
+        return $sticky.hasClass('stuck')
+      }, 'gets stuck at triggerElement')
+      runs(function() {
+        $scroller.scrollTop($triggerElement.offset().top - 1)
+      })
+      waitsFor(function() {
+        return !$sticky.hasClass('stuck')
+      }, 'gets unstuck when scrolling back')
+    })
+  })
 })