Active navigation anchor icon when scrolling to anchor point

Site URL: https://www.ditbaderum.dk/

Hi guys,

So I created 4 anchor links in my header navigation. I want the nav link that is "active" to get an icon under. So when you scroll to the anchor point or click the nav links it gets an active icon. Is this possible?

Password to site is Kris123

I have this code, but do not know how to use it.

// Cache selectors
var topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;

   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   // Set/remove active class
   menuItems
     .parent().removeClass("active")
     .end().filter("[href='#"+id+"']").parent().addClass("active");
});

This is the code for the click version. However, I want to combine click and scroll, so that the icon is always beneath the anchor link that links to the section where the user is at the moment. Example: If you manually scroll to the price section, I want the icon to be beneath the "Price" link even though the link has not been clicked.

<script>
var btnContainer = document.getElementById("header");
var btns = btnContainer.getElementsByTagName("a");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    this.className += " active";
  });
}
</script>
<style>
.header-nav-item a.active:after {
    background-image: url(https://static1.squarespace.com/static/609d9fadd9efed01ab0fa383/t/61b37c674cc03c00098a049d/1639152743050/Ikke-navngivet-1.png);
    content: "";
    display: block;
    width: 10px;
    height: 2px;
    background-size: contain;
    background-position: center center;
    text-align: center;
    margin: 0 auto;
}
</style>

Thanks, @tuanphan

I'm being bombarded by your chat agents whilst trying to get a code for you  😛 anyways. Check the jfiddle, is that what you're after?

Hahaha thats the point 😂

Yes, exactly what I'm looking for!

Thanks @Wolfsilon

I just dont know how to set it up on my site... 

16 hours ago, Wolfsilon said:

I'm being bombarded by your chat agents whilst trying to get a code for you  😛 anyways. Check the jfiddle, is that what you're after?

Thanks @Wolfsilon for sharing the solution.

I've customized some change to meet it with @KasperBed99 's site.

Kindly try the below codes in Home > Settings > Advanced > Code injection, choose Footer

<script>
  $(document).ready(function() {
    $(document).on("scroll", onScroll);
  });
  
  function onScroll() {
    var scrollPos = $(document).scrollTop();
    $('.header-display-desktop .header-nav-item > a[href*="#"]').each(function() {
      var currLink = $(this);
      var refElement = $(currLink.attr("href")).closest('section');
      if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $('.header-display-desktop .header-nav-item > a[href*="#"]').removeClass("active");
        currLink.addClass("active");
      } else {
        currLink.removeClass("active");
      }
    });
  }
</script>

<style>
  .header-nav-item > a:after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: #fff;
    transition: width 0.5s ease;
  }

  .header-nav-item > a.active:after {
    width: 100%;
  }
</style>  

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

My testing result

Thank you so much🙏🙏 You guys are the best😁 It works perfectly!

@bangank36 Do you know if there is a way to target an entire section as anchor link? I only want the line to be removed, when you scroll past the section. It removes too soon due to the code block with the anchor link that I have now. Thanks 😁

@bangank36 I solved the problem... however, it scrolls too far down :// Dont know why...

@bangank36  Ooh my god Ba, can you help me? I want the active anchor in the left sticky sidebar to change color as you scroll to the anchor point, and I have no clue how to do it. Here's the link to the page. I've attached the question I posted before, it'd be great if you could respond over on that page. 

Thank you thank you! 🙏  🙏 

On 12/11/2021 at 6:44 AM, bangank36 said:

Thanks @Wolfsilon for sharing the solution.

I've customized some change to meet it with @KasperBed99 's site.

Kindly try the below codes in Home > Settings > Advanced > Code injection, choose Footer

<script>
  $(document).ready(function() {
    $(document).on("scroll", onScroll);
  });
  
  function onScroll() {
    var scrollPos = $(document).scrollTop();
    $('.header-display-desktop .header-nav-item > a[href*="#"]').each(function() {
      var currLink = $(this);
      var refElement = $(currLink.attr("href")).closest('section');
      if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $('.header-display-desktop .header-nav-item > a[href*="#"]').removeClass("active");
        currLink.addClass("active");
      } else {
        currLink.removeClass("active");
      }
    });
  }
</script>

<style>
  .header-nav-item > a:after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: #fff;
    transition: width 0.5s ease;
  }

  .header-nav-item > a.active:after {
    width: 100%;
  }
</style>  

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Hey @bangank36 - thank you for cleaning up and providing this code! 

I've tried to implement it onto my client's site (pw=test), however I can see that the "active" class isn't being applied, and I'm not sure why... 

If you're able to take a look and to help me troubleshoot, that would be much appreciated - thank you!

On 10/20/2022 at 2:00 PM, MayaViolet said:

Hey @bangank36 - thank you for cleaning up and providing this code! 

I've tried to implement it onto my client's site (pw=test), however I can see that the "active" class isn't being applied, and I'm not sure why... 

 

If you're able to take a look and to help me troubleshoot, that would be much appreciated - thank you!

Hi @bangank36, wondering if you are able to help me with the above question? I am happy to compensate you for your time, please let me know, than kyou!

On 10/27/2022 at 5:53 AM, MayaViolet said:

Hi  wondering if you are able to help me with the above question? I am happy to compensate you for your time, please let me know, than kyou!

Just tried this code on another 7.1 site & it works here. You try checking it again

Hi @Beyondspace, I just came across this thread and am experiencing the exact same issue. 

I tried the code you provided but it didn't work for me, is there any chance you would be able to take a look?

On 12/6/2022 at 5:04 AM, SaniceMarlow said:

Hi  just came across this thread and am experiencing the exact same issue. 

I tried the code you provided but it didn't work for me, is there any chance you would be able to take a look?

If you share link to your site + remove code temporarily, we can check easier

On 12/10/2022 at 2:34 PM, tuanphan said:

If you share link to your site + remove code temporarily, we can check easier

Thank you so much @tuanphan!

URL:https://gng-concept-marlow-v3.squarespace.com/

PW:gngp22

Is there a way for you to check without me removing all the code? I have removed the code that I tried for this particular issue.

On 12/12/2022 at 8:41 AM, SaniceMarlow said:

Thank you so much @tuanphan!

URL:https://gng-concept-marlow-v3.squarespace.com/

PW:gngp22

Is there a way for you to check without me removing all the code? I have removed the code that I tried for this particular issue.

Hi,

Sorry for delay. Can you check site url? It doesn't exist

I've been trying the above code various times but it wasn't working for me. I just found the solution. If anyone may need it so according to the current Squarespace version here is the updated code. I hope it'll be helpful.

Tip: if your website's background is black try to change the CSS code before moving to other solutions because there the hex code is added as #000.

Paste the code in settings> development tools> Code injections : Footer  (it may change for future so simply search code injections after going to settings)

Quote

 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  jQuery(document).ready(function($) {
    $(document).on("scroll", onScroll);

    function onScroll() {
      var scrollPos = $(document).scrollTop();
      $('.header-display-desktop .header-nav-item > a[href*="#"]').each(function() {
        var currLink = $(this);
        var refElement = $(currLink.attr("href")).closest('section');
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
          $('.header-display-desktop .header-nav-item > a[href*="#"]').removeClass("active");
          currLink.addClass("active");
        } else {
          currLink.removeClass("active");
        }
      });
    }
  });
</script>

<style>
  .header-nav-item > a:after {
    content: '' !important;
    display: block !important;
    width: 0 !important;
    height: 1.5px !important;
    background: #000 !important;
    transition: width 0.5s ease !important;
  }

  .header-nav-item > a.active:after {
    width: 100% !important;
  }
</style>