Sticky menu

diff --git a/app/static/src/js/modules/sticky-kit-init.js b/app/static/src/js/modules/sticky-kit-init.js
index 413397d81d350315351f09ba0f9c8b4aa195a8f2..d63517086fcc5f4b1619e443db070af08d8cc3b6 100644 (file)
--- 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 46459d5a90f0b8404b19311b6ae9365b1701ad00..41a555d78c5af5abf749cba05fa795a3519ca707 100644 (file)
--- 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 083a0591f22ee8dbd91711b96e8eee869444ec2a..adcbec9616d866ec44dcd09ab8575d455af8df96 100644 (file)
--- 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 92bb1fc3ee0fc860acff68ccbb776b96d22c7613..2c1dc96274e8ce41152a62900e61011af0454081 100644 (file)
--- 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 a0efef952ef82ec55838fb38012cd915bcb4e5fd..d59773703af58a77d2a1910d794d89ce19dc55e9 100644 (file)
--- 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 af1e55e66b9c51842ecb0c79de3bdbbf4ca44fec..5401ab0069318b9c5123ea460d4139db7be08978 100644 (file)
--- 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 %}