Jump to content

Active navigation anchor icon when scrolling to anchor point

Recommended Posts

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");
});

 

Link to comment

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

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing result

 

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 3 months later...

@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! 🙏  🙏 

 

Screen Shot 2022-04-05 at 5.19.15 PM.png

Link to comment
  • 6 months later...
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!

Edited by MayaViolet
Link to comment
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!

Link to comment
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

image.thumb.png.f90c8d843a14a923790a30f30afa8be0.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.