ancre js

web/themes/custom/reha/dist/css/bundle.css

@@ -170,6 +170,8 @@
 }
 
 .layout-content {
+  position: relative;
+  top: 110px;
   order: 2;
   padding-top: 3rem;
   padding-bottom: 6rem;
@@ -295,8 +297,7 @@ header {
   z-index: 101;
   width: 100vw;
   max-width: 100vw;
-  position: -webkit-sticky;
+  position: fixed;
-  position: sticky;
   top: 0;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
 }
@@ -2584,11 +2585,10 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   position: relative;
 }
 .page-programme .layout__region--first .block-region-first {
-  padding-left: 20%;
+  padding-left: 3rem;
   display: flex;
   justify-content: flex-end;
-  position: -webkit-sticky;
+  position: fixed;
-  position: sticky;
   top: 10rem;
 }
 .page-programme .layout__region--first .block-region-first > .block-block-content {

web/themes/custom/reha/js/reha.js

@@ -194,54 +194,68 @@ jQuery(document).ready(function($){
 //// ancre dans texte au click parragraphe correspondant arrive en dessous du header 
 
 
+// (function($, window) {
+//   var adjustAnchor = function() {
+//       var $anchor = $('.block-region-first'),
+//               fixedElementHeight = 300;
+//               console.log($anchor);
+//       if ($anchor.length > 0) {
+//           $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);
+//       }
+//   };
 
-// function adjustAnchor() {
+//   $(window).on('hashchange', function() {
-//   var $anchor = $(window.location.hash); // Select the anchor element based on the hash in the URL
+//       adjustAnchor();
-//   var fixedElementHeight = $('.block-region-first').outerHeight(); // Get the height of the sticky element
+//   });
-
-//   if ($anchor.length > 0) {
-//     $('html, body').stop().animate({
-//       scrollTop: $anchor.offset().top - fixedElementHeight // Adjust the scroll position to account for the sticky element height
-//     }, 0);
-//   }
-// }
-
-// // Call the function on page load if there's a hash
-// if (window.location.hash) {
-//   adjustAnchor();
-// }
-
-// // Adjust the anchor on hash change
-// $(window).on('hashchange', function() {
-//   adjustAnchor();
 // });  
 
+function adjustAnchor() {
+  var $anchor = $(window.location.hash); // Select the anchor element based on the hash in the URL
+  var fixedElementHeight = $('.block-region-first').outerHeight(); // Get the height of the sticky element
+
+  if ($anchor.length > 0) {
+    $('html, body').stop().animate({
+      scrollTop: $anchor.offset().top - fixedElementHeight // Adjust the scroll position to account for the sticky element height
+    }, 0);
+  }
+}
+
+// Call the function on page load if there's a hash
+if (window.location.hash) {
+  adjustAnchor();
+}
+
+// Adjust the anchor on hash change
+$(window).on('hashchange', function() {
+  adjustAnchor();
+});
+
 
 
 //////////////////////////////////////////
 // menu ancre paragraphe quand actif
      
-  jQuery(function($) {
+jQuery(function($) {
-    // Function to set the active class based on the current path
+  // Function to set the active class based on the current path
-    function setActiveLink() {
+  function setActiveLink() {
-        var path = window.location.href;
+      var path = window.location.href;
-        console.log(path);
+      console.log(path);
-        $(".layout__region--first .block-region-first li a").each(function() {
+      $(".layout__region--first .block-region-first li a").each(function() {
-            if (this.href === path) {
+          if (this.href === path) {
-                $(this).closest('a').addClass('active');
+              $(this).closest('a').addClass('active');
-            }
+          }
-        });
+      });
-    }
+  }
 
-    // Initially set the active link based on the current URL
+  // Initially set the active link based on the current URL
-    setActiveLink();
+  setActiveLink();
 
-    // Update the active link on click
+  // Update the active link on click
-    $(".layout__region--first .block-region-first li a").on('click', function() {
+  $(".layout__region--first .block-region-first li a").on('click', function() {
-        $(".layout__region--first .block-region-first li a").removeClass('active');
+      $(".layout__region--first .block-region-first li a").removeClass('active');
-        $(this).addClass('active');
+      $(this).addClass('active');
-    });
   });
+});
 
 
 })(jQuery, window);

web/themes/custom/reha/scss/global/_layout.scss

@@ -29,6 +29,8 @@ $width-menu-slidedown : 550px;
 }
 
 .layout-content{
+    position: relative;
+    top: $header-height;
     order: 2;
     padding-top: 3rem;
     padding-bottom: 6rem;

web/themes/custom/reha/scss/pages/le-programme.scss

@@ -1,17 +1,20 @@
 
 .page-programme{
+
     .layout__region--first{
 
         position: relative;
         .block-region-first{
-
+            // position: relative;
-            padding-left: 20%;
+            padding-left:3rem;
             display: flex;
             justify-content: flex-end;
-            position: -webkit-sticky;
+            position: fixed;
-            position: sticky;
             top: 10rem;
             > .block-block-content{
+                // position: -webkit-sticky;
+                // position: sticky;
+                // top: 10rem;
                 width: 100%;
                 ul{
                     padding-left: 0;

web/themes/custom/reha/scss/partials/_header.scss

@@ -7,8 +7,7 @@ header{
     z-index: 101;
     width: 100vw;
     max-width: 100vw;
-    position: -webkit-sticky;
+    position: fixed;
-    position: sticky;
     top: 0;
     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
     @media (max-width:800px) {