add task:hide and task:show to ticket zoom

app/assets/javascripts/app/controllers/ticket_zoom.js.coffee

@@ -40,6 +40,9 @@ class App.TicketZoom extends App.Controller
         @delay( update, 1800, 'ticket-zoom-' + @ticket_id )
     )
 
+    @bind "task:hide", @onHide
+    @bind "task:show", @onShow
+
   meta: =>
     meta =
       url:        @url()
@@ -69,6 +72,7 @@ class App.TicketZoom extends App.Controller
   release: =>
     # nothing
     @autosaveStop()
+    @scrollHeader.destroy() if @scrollHeader
 
   fetch: (ticket_id, force) ->
 
@@ -385,23 +389,31 @@ class App.TicketZoom extends App.Controller
     @userPopups()
 
     @autosaveStart()
+
+    @scrollToBottom()
   
     @bindScrollPageHeader()
 
-    @scrollToBottom()
-
-  scrollToBottom: ->
+  scrollToBottom: =>
     @main.scrollTop( @main.prop('scrollHeight') )
 
   bindScrollPageHeader: ->
     pageHeader = @$('.page-header')
-    scrollHolder = pageHeader.scrollParent()
-    scrollBody = scrollHolder.get(0).scrollHeight - scrollHolder.height()
+    scrollBody = @main.prop('scrollHeight') - @main.height()
 
     if scrollBody > pageHeader.height()
-      skrollr.init
+      # TODO: recalculate the distance when adding a comment
+      @scrollHeader = skrollr.init
         forceHeight: false
-        holder: scrollHolder.get(0)
+        holder: @main.get(0)
+
+  onShow: =>
+    if @scrollHeader
+      @scrollHeader.continue()
+
+  onHide: =>
+    if @scrollHeader
+      @scrollHeader.pause()
 
   autosaveStop: =>
     @autosaveLast = {}

app/assets/javascripts/app/lib/animations/skrollr.js

@@ -7,6 +7,7 @@
  *
  * Free to use under terms of MIT license
  */
+window.id = 0;
 (function(window, document, undefined) {
 	'use strict';
 
@@ -19,7 +20,7 @@
 		},
 		//Main entry point.
 		init: function(options) {
-			return _instance || new Skrollr(options);
+			new Skrollr(options);
 		},
 		VERSION: '0.6.26'
 	};
@@ -232,6 +233,8 @@
 
 		_instance = this;
 
+		this.id = window.id++;
+
 		options = options || {};
 
 		_constants = options.constants || {};
@@ -308,17 +311,30 @@
 			}
 		});
 
-		var requestAnimFrame = polyfillRAF();
-
 		//Let's go.
-		(function animloop(){
-			_render();
-			_animFrame = requestAnimFrame(animloop);
-		}());
+		this.animloop();
 
 		return _instance;
 	}
 
+	Skrollr.prototype.animloop = function() {
+		var requestAnimFrame = polyfillRAF();
+		_render();
+		// console.log("rendering", this.id);
+		if(!this.paused)
+			_animFrame = requestAnimFrame(_instance.animloop.bind(this));
+	}
+
+	Skrollr.prototype.pause = function() {
+		cancelAnimFrame(_animFrame);
+		this.paused = true;
+	}
+
+	Skrollr.prototype.continue = function() {
+		this.paused = false;
+		this.animloop();
+	}
+
 	/**
 	 * (Re)parses some or all elements.
 	 */
@@ -616,7 +632,7 @@
 		if(_isMobile) {
 			_mobileOffset = Math.min(Math.max(top, 0), _maxKeyFrame);
 		} else {
-			window.scrollTo(0, top);
+			documentElement.scrollTop = top;
 		}
 
 		return _instance;