Moved to easier page header show/hide implementation of long pages.

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

@@ -1,6 +1,8 @@
 class App.TicketZoom extends App.Controller
   elements:
     '.main':             'main'
+    '.ticketZoom':       'ticketZoom'
+    '.scrollPageHeader': 'scrollPageHeader'
 
   events:
     'click .js-submit':   'submit'
@@ -59,12 +61,10 @@ class App.TicketZoom extends App.Controller
   show: =>
     App.OnlineNotification.seen( 'Ticket', @ticket_id )
     @navupdate '#'
-    if @scrollHeader
+    @positionPageHeaderStart()
-      @scrollHeader.continue()
 
   hide: =>
-    if @scrollHeader
+    @positionPageHeaderStop()
-      @scrollHeader.pause()
 
   changed: =>
     formCurrent = @formParam( @el.find('.edit') )
@@ -74,9 +74,8 @@ class App.TicketZoom extends App.Controller
     return true
 
   release: =>
-    # nothing
     @autosaveStop()
-    @scrollHeader.destroy() if @scrollHeader
+    @positionPageHeaderStop()
 
   fetch: (ticket_id, force) ->
 
@@ -149,6 +148,36 @@ class App.TicketZoom extends App.Controller
     # render page
     @render(force)
 
+  positionPageHeaderStart: =>
+
+    # scroll is also fired on window resize, if element scroll is changed
+    @main.bind(
+      'scroll'
+      @positionPageHeaderUpdate
+    )
+
+  positionPageHeaderStop: =>
+    @main.unbind('scroll', @positionPageHeaderUpdate)
+
+  positionPageHeaderUpdate: =>
+    pageHeader       = @scrollPageHeader.height()
+    mainScrollHeigth = @main.prop('scrollHeight')
+    mainHeigth       = @main.height()
+
+    # if page header is possible to use, show page header
+    top = 0
+    if mainScrollHeigth > mainHeigth + pageHeader
+      offset = @ticketZoom.offset()
+      if offset.top >= 0
+        top = offset.top
+
+    # if page header is not possible to use - mainScrollHeigth to low - hide page header
+    else
+      top = pageHeader
+
+    #console.log('TOP', top, @ticket.id, new Date)
+    @scrollPageHeader.css('transform', "translateY(-#{top}px)")
+
   render: (force) =>
 
     # update taskbar with new meta data
@@ -404,21 +433,11 @@ class App.TicketZoom extends App.Controller
 
     @scrollToBottom()
 
-    @bindScrollPageHeader()
+    @positionPageHeaderStart()
 
   scrollToBottom: =>
     @main.scrollTop( @main.prop('scrollHeight') )
 
-  bindScrollPageHeader: ->
-    pageHeader = @$('.page-header')
-    scrollBody = @main.prop('scrollHeight') - @main.height()
-
-    if scrollBody > pageHeader.height()
-      # TODO: recalculate the distance when adding a comment
-      @scrollHeader = skrollr.init
-        forceHeight: false
-        holder: @main.get(0)
-
   autosaveStop: =>
     @autosaveLast = {}
     @clearInterval( 'autosave' )

app/assets/javascripts/app/views/ticket_zoom.jst.eco

@@ -1,11 +1,7 @@
 <div class="tabsSidebar-holder">
   <div class="main no-padding flex tabsSidebar-sidebarSpacer tabsSidebar-tabsSpacer">
     <div class="ticketZoom">
-      <div class="scrollPageHeader tabsSidebar-sidebarSpacer zIndex-3 horizontal center"
+      <div class="scrollPageHeader tabsSidebar-sidebarSpacer zIndex-3 horizontal center">
-        data-anchor-target=".ticketZoom .page-header"
-        data-128-top-bottom="transform: translateY(-64px);"
-        data-64-top-bottom="transform: translateY(0px);"
-      >
         <small><%- @C('ticket_hook') %> <span class="ticket-number"><%- @ticket.number %></span></small>
         <div class="ticket-title flex"></div>
         <div class="pagination-counter">

app/assets/javascripts/application.js

@@ -11,7 +11,6 @@
 
 //= require ./app/lib/animations/velocity.min.js
 //= require ./app/lib/animations/velocity.ui.js
-//= require ./app/lib/animations/skrollr.js
 
 //not_used= require_tree ./app/lib/spine
 //= require ./app/lib/spine/spine.coffee