Fixed-header to display section.title(s) on scroll

Solved
Highlighted
Shopify Partner
3 1 0

Hello,

On a fixed-header I'm trying to replace the shop.name with the section.title(s) of each dynamic section as you scroll down the home page. 

I've got it working but only to display the first section.title and only by adding the .js script directly to each section.liquid file.

The section.title stops showing If I use:

<script src="{{ 'scriptname.js.liquid' | asset_url }}"></script> 
{{ 'scriptname.js.liquid' | asset_url | script_tag }}

 

Here's a working example of what I'm trying to achieve: https://codepen.io/jg1985/pen/YzyXXro 

 

The issue seems to be with having multiple instances of the same section.title, e.g "Gallery" is the title of several sections but only currently shows on-scroll of the first section.

 

Any guidance on how to add a loop.index to the .js script to make it work with multiple sections?


Here's a cut-down version of the code with the full .js

 

<style>
#label-anchor { }
#label {font-size:15px; text-transform: lowercase; }
.fix { position: fixed; width: 100%; } 
</style>
<header>
<span id="label" class="">{{ shop.name }}</span><div id="label-anchor"></div>
</header>
<section id="{{ section.settings.title }}">
section content
</section>
<script>
  function label_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $("#label-anchor").offset().top;
  if (window_top > div_top) {
    $("#label").addClass("fix");
  } else {
    $("#label").removeClass("fix");
  }
}
$(function () {
  $(window).scroll(function () {
    label_relocate();
    if (
      $(window).scrollTop() > ($("#{{ section.settings.title }}").offset().top - 250) &&
      $(window).scrollTop() < $("#{{ section.settings.title }}").offset().top + ($("#{{ section.settings.title }}").outerHeight(true) - 250))
    {
      $("#label").text("{{ section.settings.title }}");
    } else {
      $("#label").text("");
    }
  });
});
</script>

 

thanks

 

 

0 Likes
Highlighted
Shopify Partner
3 1 0

This is an accepted solution.

This script is now working and updates for up to 5 section.blocks.

However it's very long...

<script>
  
function label_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $("#label-anchor").offset().top;
  if (window_top > div_top) {
    $("#label").addClass("fix");
  } else {
    $("#label").removeClass("fix");
  }
}

$(function () {
  $(window).scroll(function () {
    label_relocate();
 
    {% for block in section.blocks %}
     {% case section.blocks.size %}
      {% when 1 %}
      if (
      $(window).scrollTop() > ($("#{{ section.settings.title }}-1").offset().top - 150) &&
      $(window).scrollTop() < $("#{{ section.settings.title }}-1").offset().top + ($("#{{ section.settings.title }}-1").outerHeight(true) - 150))
    {
      $("#label").text("{{ section.settings.title }}");

    } {% when 2 %}
      if (
      $(window).scrollTop() > ($("#{{ section.settings.title }}-1").offset().top - 150) &&
      $(window).scrollTop() < $("#{{ section.settings.title }}-1").offset().top + ($("#{{ section.settings.title }}-1").outerHeight(true) - 150))
    {
      $("#label").text("{{ section.settings.title }}");

    } else if (
      $(window).scrollTop() > ($("#{{ section.settings.title }}-2").offset().top - 150) &&
      $(window).scrollTop() < $("{{ section.settings.title }}-2").offset().top + ($("#{{ section.settings.title }}-2").outerHeight(true) - 150))
    {
      $("#label").text("{{ section.settings.title }}");

    } {% when 3 %}
      if (
      $(window).scrollTop() > ($("#{{ section.settings.title }}-1").offset().top - 150) &&
      $(window).scrollTop() < $("#{{ section.settings.title }}-1").offset().top + ($("#{{ section.settings.title }}-1").outerHeight(true) - 150))
    {
      $("#label").text("{{ section.settings.title }}");

    } else if (
      $(window).scrollTop() > ($("#{{ section.settings.title }}-2").offset().top - 150) &&
      $(window).scrollTop() < $("#{{ section.settings.title }}-2").offset().top + ($("#{{ section.settings.title }}-2").outerHeight(true) - 150))
    {
      $("#label").text("{{ section.settings.title }}");

    }  else if (
      $(window).scrollTop() > ($("#{{ section.settings.title }}-3").offset().top - 150) &&
      $(window).scrollTop() < $("#{{ section.settings.title }}-3").offset().top + ($("#{{ section.settings.title }}-3").outerHeight(true) - 150))
    {
      $("#label").text("{{ section.settings.title }}");

    } {% when 4 %} else if (
      $(window).scrollTop() > ($("#{{ section.settings.title }}-1").offset().top - 150) &&
      $(window).scrollTop() < $("#{{ section.settings.title }}-1").offset().top + ($("#{{ section.settings.title }}-1").outerHeight(true) - 150))
    {
      $("#label").text("{{ section.settings.title }}");

    } else if (
      $(window).scrollTop() > ($("#{{ section.settings.title }}-2").offset().top - 150) &&
      $(window).scrollTop() < $("#{{ section.settings.title }}-2").offset().top + ($("#{{ section.settings.title }}-2").outerHeight(true) - 150))
    {
      $("#label").text("{{ section.settings.title }}");

    }  else if (
      $(window).scrollTop() > ($("#{{ section.settings.title }}-3").offset().top - 150) &&
      $(window).scrollTop() < $("#{{ section.settings.title }}-3").offset().top + ($("#{{ section.settings.title }}-3").outerHeight(true) - 150))
    {
      $("#label").text("{{ section.settings.title }}");

    }  else if (
      $(window).scrollTop() > ($("#{{ section.settings.title }}-4").offset().top - 150) &&
      $(window).scrollTop() < $("#{{ section.settings.title }}-4").offset().top + ($("#{{ section.settings.title }}-4").outerHeight(true) - 150))
    {
      $("#label").text("{{ section.settings.title }}");

    } {% when 5 %} else if (
      $(window).scrollTop() > ($("#{{ section.settings.title }}-1").offset().top - 150) &&
      $(window).scrollTop() < $("#{{ section.settings.title }}-1").offset().top + ($("#{{ section.settings.title }}-1").outerHeight(true) - 150))
    {
      $("#label").text("{{ section.settings.title }}");

    } else if (
      $(window).scrollTop() > ($("#{{ section.settings.title }}-2").offset().top - 150) &&
      $(window).scrollTop() < $("#{{ section.settings.title }}-2").offset().top + ($("#{{ section.settings.title }}-2").outerHeight(true) - 150))
    {
      $("#label").text("{{ section.settings.title }}");

    }  else if (
      $(window).scrollTop() > ($("#{{ section.settings.title }}-3").offset().top - 150) &&
      $(window).scrollTop() < $("#{{ section.settings.title }}-3").offset().top + ($("#{{ section.settings.title }}-3").outerHeight(true) - 150))
    {
      $("#label").text("{{ section.settings.title }}");

    }  else if (
      $(window).scrollTop() > ($("#{{ section.settings.title }}-4").offset().top - 150) &&
      $(window).scrollTop() < $("#{{ section.settings.title }}-4").offset().top + ($("#{{ section.settings.title }}-4").outerHeight(true) - 150))
    {
      $("#label").text("{{ section.settings.title }}");

    }  else if (
      $(window).scrollTop() > ($("#{{ section.settings.title }}-5").offset().top - 150) &&
      $(window).scrollTop() < $("#{{ section.settings.title }}-5").offset().top + ($("#{{ section.settings.title }}-5").outerHeight(true) - 150))
    {
      $("#label").text("{{ section.settings.title }}");

    } {% endcase %}
    {% endfor %}
    
      else if (
      $(window).scrollTop() > ($("#supplies").offset().top - 150) &&
      $(window).scrollTop() < $("#supplies").offset().top + ($("#supplies").outerHeight(true) - 150))
    {
      $("#label").text("supplies");

    } else if (
      $(window).scrollTop() > ($("#gallery").offset().top - 150) &&
      $(window).scrollTop() < $("#gallery").offset().top + ($("#gallery").outerHeight(true) - 150))
    {
      $("#label").text("gallery");

    } else if (
      $(window).scrollTop() > ($("#merch").offset().top - 150) &&
      $(window).scrollTop() < $("#merch").offset().top + ($("#merch").outerHeight(true) - 150))
    {
      $("#label").text("merch");
    
} else {
      $("#label").text("");
    }
  });
});
</script>
0 Likes