Fix block to top of page

Rob Dawson

• May 11, 2023 02:22

Is it possible to fix a block to the top of a page like you can with a Header? I have a Header fixed in place but want to fix a block underneath it to hold a Breadcrumb element so that when you scroll the page both remain fixed at the top.  I've tried putting the breadcrumb in my header but I need the full width background to be a different colour, not just the block width so that won't work.  I also tried adding a 2nd Header but that doesn't work correctly if I delete the menu item.  Is there a way I can achieve this or am I missing something with the Header without a menu?

0

• 

  Ariel H.

  • May 11, 2023 11:23

  Hi Rob,

  Thank you for contacting us.

  Unfortunately, this is not possible with current features.  This will require custom code to accomplish it.

  I have made a short screencast on this link - https://youtu.be/MjGNQJLyVoM

  Here is the JavaScript:

  
  <script>
   window.onscroll = function() {stickyBlock()};
  
  var div = document.querySelector(".breadcrumbs-area");
  var headerHeight = document.querySelector("#myheader").offsetHeight;
  var divOffsetTop = div.offsetTop;
  
  function stickyBlock() {
    if (window.pageYOffset > (divOffsetTop - headerHeight)) {
      div.classList.add("sticky");
    } else {
      div.classList.remove("sticky");
    }
  }
  </script>

  Here is the CSS:

  
  .breadcrumbs-area {
    position: relative;
  }
  
  .breadcrumbs-area.sticky {
    position: fixed;
    top: 80px; /* replace with the height of your header */
    width: 100%;
  }

  Please be advised that the custom code is offered as a one-time courtesy, and we cannot guarantee its functionality or provide ongoing maintenance or support for it.
  It is also important to note that every website is unique, and the CSS /JS may require some modifications. If necessary, please review the code and make any necessary adjustments to fit your website.

  Best regards,
  Ariel H.

   

  0
• 

  Rob Dawson

  • May 22, 2023 23:31

  Hi Ariel,

  Thanks for your detailed response. I tried to get it to work but was ultimately unsuccessful. I don't think there was any problem with your code as I tested all the variables and values, and everything was getting populated correctly - it just didn't fire when I scrolled the page.  For the short term I have added the breadcrumb to the existing main header and used a margin setting to cover it when on the home page.  Not perfect, but a workaround I can live with until I get time to revisit it.  I appreciate your effort - your response was exactly what I was looking for and hopefully can help others if they are looking for the same functionality.

  Regards,

  Rob

  0

Please sign in to leave a comment.