Refs #2482: adding sticky behavior for main top nav

1 files changed, 27 insertions, 1 deletions

diff --git a/app/assets/javascripts/main_menu.coffee b/app/assets/javascripts/main_menu.coffee
index 91b714fcf..cdc1654c5 100644
--- a/app/assets/javascripts/main_menu.coffee
+++ b/app/assets/javascripts/main_menu.coffee
@@ -1,10 +1,36 @@
 @mainmenu = ->
   $('#main_nav').each ->
+    # Opening/closing left-side menu
     $(this).on 'click', '.openMenu', (e) ->
       $(this).parent().addClass 'open'
 
     $(this).on 'click', '.closeMenu', (e) ->
-      console.log('pouet')
       $(this).closest('.nav-menu').removeClass 'open'
 
+    # Sticky behavior
+    toStick = $('.page_header')
+    limit = toStick.outerHeight() - 33
+
+    console.log limit
+
+    stickyContent = '<div class="sticky-content">'
+    stickyContent += '<div class="sticky-ptitle">' + $(".page-title").html() + '</div>'
+    stickyContent += '<div class="sticky-paction">' + $(".page-action").html() + '</div>'
+    stickyContent += '</div>'
+
+    $(document).on 'scroll', ->
+      if $(window).scrollTop() >= limit
+        $('body').addClass 'has-sticky'
+        $('#main_nav').addClass 'sticky'
+
+        if $('#menu_top').find('.sticky-content').length == 0
+          $('#menu_top').children('.menu-content').after(stickyContent)
+
+      else
+        $('body').removeClass 'has-sticky'
+        $('#main_nav').removeClass 'sticky'
+
+        if $('#menu_top').find('.sticky-content').length > 0
+          $('.sticky-content').remove()
+
 $(document).on 'ready turbolinks:load', mainmenu