From 244bdf290b9dc44c117d48f8715bbf5796d53cdd Mon Sep 17 00:00:00 2001
From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= <Jeremy@iMac-de-Jeremy.local>
Date: Fri, 14 Oct 2016 15:03:58 +0200
Subject: [PATCH] Sticky menu

---
 app/static/src/js/modules/sticky-kit-init.js    | 17 +++++++++++------
 app/static/src/js/modules/summary.js            |  9 +++++++++
 app/static/src/sass/modules/navs/_nav-tree.scss |  9 +++++++++
 .../pages/menus/current_tree_primary.html       |  2 +-
 .../pages/menus/current_tree_secondary.html     |  2 +-
 app/templates/pages/page.html                   |  4 ++++
 6 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/app/static/src/js/modules/sticky-kit-init.js b/app/static/src/js/modules/sticky-kit-init.js
index 413397d8..d6351708 100644
--- a/app/static/src/js/modules/sticky-kit-init.js
+++ b/app/static/src/js/modules/sticky-kit-init.js
@@ -17,21 +17,23 @@ StickyKitInit.prototype.init = function() {
         options = {},
         data, element, $element;
 
-    /*var sliders = $('.page__slider');
+    var sliders = $('.page__slider');
     if(sliders.length > 0) {
-        that.pageContentTop = $('.page__content').offset().top + $('.page__content').height() - 400;
-        that.pageContentBottom = $('.page__sub').offset().top;
-    }*/
+        that.pageContentTop = $(sliders[0]).offset().top - 72;
+        that.pageContentBottom = that.pageContentTop + (sliders.length * 724) + 72;
+    }
 
     $('[data-sticky]').each(function(i) {
 
         $element = $(this);
         $element.on('sticky_kit:bottom', function(e) {
             var $self = $(this);
+            $(this).parent().parent().css('position', 'static');
             $(this).parent().css('position', 'static');
             $(this).addClass('to-bottom');
         })
         .on('sticky_kit:unbottom', function(e) {
+            $(this).parent().parent().css('position', 'relative');
             $(this).parent().css('position', 'relative');
             $(this).removeClass('to-bottom');
         });
@@ -57,7 +59,8 @@ StickyKitInit.prototype.init = function() {
     });
 
     $(window).resize( $.throttle(1000, that.windowResize.bind(that)) );
-    //$(window).scroll( that.windowScroll.bind(that) );
+    $(window).scroll( that.windowScroll.bind(that) );
+    that.windowScroll();
 
 };
 
@@ -70,10 +73,12 @@ StickyKitInit.prototype.windowScroll = function(e) {
 
             if(that.elements[i].attached) {
 
+                var height = that.elements[i].$element.height();
                 var top = $(window).scrollTop();
-                if(top >= that.pageContentTop && top < that.pageContentBottom) {
+                if(top >= (that.pageContentTop - height) && top < (that.pageContentBottom)) {
                     that.elements[i].$element.addClass('faded');
                 } else {
+                    console.log('remove');
                     that.elements[i].$element.removeClass('faded');
                 }
 
diff --git a/app/static/src/js/modules/summary.js b/app/static/src/js/modules/summary.js
index 46459d5a..41a555d7 100644
--- a/app/static/src/js/modules/summary.js
+++ b/app/static/src/js/modules/summary.js
@@ -46,6 +46,15 @@ Summary.prototype.init = function() {
         // Scrollspy
         $(document).on("scroll", that.onScroll.bind(that));
 
+        // Row height
+        if($('.page__sidebar .nav-tree--level-0').height() > $('.page__content').height()) {
+
+            $('.page__content').css({
+                'margin-bottom': $('.page__sidebar .nav-tree--level-0').height() - $('.page__content').height() + 48
+            });
+
+        }
+
     }
 
 };
diff --git a/app/static/src/sass/modules/navs/_nav-tree.scss b/app/static/src/sass/modules/navs/_nav-tree.scss
index 083a0591..adcbec96 100644
--- a/app/static/src/sass/modules/navs/_nav-tree.scss
+++ b/app/static/src/sass/modules/navs/_nav-tree.scss
@@ -6,11 +6,20 @@ $module: ".nav-tree";
     margin: 0;
     list-style-type: none;
     z-index: 2;
+
+    position: absolute;
+    width: 100%;
+
+    .nav-tree & {
+        position: relative;
+    }
+
     opacity: 1;
     @include transition(opacity 0.25s ease-in-out);
 
     &.faded {
         opacity: 0;
+        @include transition(opacity 0.25s ease-in-out);
     }
 
     &.is_stuck {
diff --git a/app/templates/pages/menus/current_tree_primary.html b/app/templates/pages/menus/current_tree_primary.html
index 92bb1fc3..2c1dc962 100644
--- a/app/templates/pages/menus/current_tree_primary.html
+++ b/app/templates/pages/menus/current_tree_primary.html
@@ -6,7 +6,7 @@
         {% for page in page_branch %}
             {% if page.in_menu and page.has_children_in_menu %}
                 {% if page.is_primary and page.is_current_or_ascendant %}
-                <ul class="nav-tree nav-tree--level-{{ branch_level }}" data-sticky data-sticky-parent="row" data-sticky-offset="100" data-sticky-detach-at="971">
+                <ul class="nav-tree nav-tree--level-{{ branch_level }}" data-sticky data-sticky-parent="page" data-sticky-offset="100" data-sticky-detach-at="971">
                     <li class="nav-tree__item">
                         <a class="nav-tree__link{% if page.is_current %} active{% endif %}" href="{{ page.get_absolute_url }}">{% trans 'Accueil' %}</a>
                     </li>
diff --git a/app/templates/pages/menus/current_tree_secondary.html b/app/templates/pages/menus/current_tree_secondary.html
index a0efef95..d5977370 100644
--- a/app/templates/pages/menus/current_tree_secondary.html
+++ b/app/templates/pages/menus/current_tree_secondary.html
@@ -6,7 +6,7 @@
         {% for page in page_branch %}
             {% if page.in_menu and page.has_children_in_menu %}
                 {% if page.is_primary and page.is_current_or_ascendant %}
-                <ul class="nav-tree nav-tree--level-{{ branch_level }}" data-sticky data-sticky-parent="row" data-sticky-offset="100" data-sticky-detach-at="971">
+                <ul class="nav-tree nav-tree--level-{{ branch_level }}" data-sticky data-sticky-parent="page" data-sticky-offset="100" data-sticky-detach-at="971">
                 {% endif %}
                 {% if page.is_current_or_ascendant %}
                     {% if page.has_children_in_menu %}
diff --git a/app/templates/pages/page.html b/app/templates/pages/page.html
index af1e55e6..5401ab00 100644
--- a/app/templates/pages/page.html
+++ b/app/templates/pages/page.html
@@ -42,6 +42,9 @@
             <div class="row">
 
                 <div class="col-sm-3 col-lg-2 page__sidebar">
+                    <div style="position: relative;">
+
+
                     {% block page_sidebar %}
                         {% if page.get_ascendants|length < 2 %}
                             {% page_menu "pages/menus/current_tree_primary.html" %}
@@ -50,6 +53,7 @@
                             {% page_menu "pages/menus/current_tree_secondary.html" %}
                         {% endif %}
                     {% endblock %}
+                    </div>
                 </div>
                 <div class="mb2 col-sm-9 col-lg-8 white-bg page__content" data-summary-content>
                     {% block page_content %}
-- 
2.39.5