Highlight anchor links when user scrolls them into view - html

Question

I know there are similar examples covering my question. But I believe my question is unique due to the following reasons:
The menu items in the anchornav do not consist of <a href tags like in most other examples. Instead they consist of DIVs with a data-href each.
The target anchors consist of DIV with an ID based on a GUID from our CMS.
<div class="something">
<div class="somethingelse">
<div class="">
<div class="flickity-wrapper">
<ul class="list-unstyled flickity-enabled is-draggable" role="tablist" tabindex="0">
<div class="flickity-viewport" style="height: 79px; touch-action: none;">
<div class="flickity-slider" style="left: 0px; transform: translateX(29.99%);">
<li class="carousel-cell is-selected" style="position: absolute; left: 0%;">
<div class="anchor" data-href="#85eeb28d-3964-443a-8c29-cda37f131f47">Login</div>
</li>
<li class="carousel-cell" style="position: absolute; left: 8.16%;">
<div class="anchor" data-href="#8ba0442a-0621-41e1-8449-3f71e18af8d2">Success</div>
</li>
<li class="carousel-cell" style="position: absolute; left: 16.67%;">
<div class="anchor" data-href="#61cb9468-60e8-4ac6-a272-4b659fb27400">Contact</div>
</li>
</div>
</div>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div id="85eeb28d-3964-443a-8c29-cda37f131f47">Login</div>
<div id="8ba0442a-0621-41e1-8449-3f71e18af8d2">Success</div>
<div id="61cb9468-60e8-4ac6-a272-4b659fb27400">Contact</div>
I have attempted to put together the following code in the hopes of getting the anchor nav items highlighted but nothing is working:
var lastID;
var anchorMenu = $("#anchorNav");
var anchorMenuHeight = anchorMenu.outerHeight+100;
var anchorMenuItems = anchorMenu.find(".anchor");
var anchorMenuItemsTarget = anchorMenuItems.map(function(){
var item = $($(this).attr("data-href"));
if (item.length) { return item; }
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+anchorMenuHeight+300;
// Get id of current scroll item
var cur = anchorMenuItemsTarget.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 : "";
if (lastID !== id) {
lastID = id;
// Set/remove active class
anchorMenuItems
.parent().removeClass("active")
.end().filter("[data-href='"+id+"']").parent().addClass("active");
}
});
My example CSS:
body {
height: 6000px;
font-family: Helvetica, Arial;
}
#anchorNav {
position: fixed;
z-index: 1;
background: white;
left: 0;
right: 0;
top: 0;
}
#anchorNav li.active {
border-top: 3px solid #333;
color: #333;
}
[id='85eeb28d-3964-443a-8c29-cda37f131f47'] {
position: absolute;
top: 500px;
}
[id='8ba0442a-0621-41e1-8449-3f71e18af8d2'] {
position: absolute;
top: 800px;
}
[id='61cb9468-60e8-4ac6-a272-4b659fb27400'] {
position: absolute;
top: 1200px;
}
Demo JS Fiddle: https://jsfiddle.net/vyrhnmt1/1/
I am trying to emulate this JS Fiddle and convert it to my use case: http://jsfiddle.net/mekwall/up4nu/
Any help or tips would be greatly appreciated.

Answer 1

This code does the job: i have added some css lines and modify some js lines
var lastID;
var anchorMenu = $("#anchorNav");
var anchorMenuHeight = anchorMenu.outerHeight()+100;
var anchorMenuItems = anchorMenu.find(".anchor");
var anchorMenuItemsTarget = anchorMenuItems.map(function(){
var item = $($(this).attr("data-href"));
if (item.length) { return item; }
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+anchorMenuHeight+300;
// Get id of current scroll item
var cur = anchorMenuItemsTarget.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 : "";
if (lastID !== id) {
lastID = id;
// Set/remove active class
anchorMenuItems.removeClass("active")
anchorMenuItems.filter("[data-href='#"+id+"']").addClass("active");
}
});
body {
height: 6000px;
font-family: Helvetica, Arial;
}
#anchorNav {
position: fixed;
z-index: 1;
background: white;
left: 0;
right: 0;
top: 0;
}
.anchor{
color: #aaa;
}
.anchor.active{
color: #333;
}
[id='85eeb28d-3964-443a-8c29-cda37f131f47'] {
position: absolute;
top: 500px;
}
[id='8ba0442a-0621-41e1-8449-3f71e18af8d2'] {
position: absolute;
top: 800px;
}
[id='61cb9468-60e8-4ac6-a272-4b659fb27400'] {
position: absolute;
top: 1200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="anchorNav" class="anchornav bg-light">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4 col-sm-push-8 col-md-push-9 text-right">
</div>
<div class="col-md-9 col-sm-8 col-sm-pull-4 col-md-pull-3 col-xs-12">
<div class="flickity-wrapper">
<ul class="list-unstyled flickity-enabled is-draggable" role="tablist" tabindex="0">
<div class="flickity-viewport" style="height: 79px; touch-action: none;">
<div class="flickity-slider" style="left: 0px; transform: translateX(29.99%);">
<li class="carousel-cell is-selected" style="position: absolute; left: 0%;">
<div class="active anchor" data-href="#85eeb28d-3964-443a-8c29-cda37f131f47">Login</div>
</li>
<li class="carousel-cell" style="position: absolute; left: 8.16%;">
<div class="anchor" data-href="#8ba0442a-0621-41e1-8449-3f71e18af8d2">Erfolg</div>
</li>
<li class="carousel-cell" style="position: absolute; left: 16.67%;">
<div class="anchor" data-href="#61cb9468-60e8-4ac6-a272-4b659fb27400">Kontakt</div>
</li>
</div>
</div>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div id="85eeb28d-3964-443a-8c29-cda37f131f47">Login</div>
<div id="8ba0442a-0621-41e1-8449-3f71e18af8d2">Erfolg</div>
<div id="61cb9468-60e8-4ac6-a272-4b659fb27400">Kontakt</div>