Vertical navigation Magic Marker highlight on fullpage.js site

Question

I'm trying to get a vertical navigation highlight to work on a fullpage.js powered site. I want the highlight bar to follower the cursor as you go over the links and then stay at a link after you click on it and are scrolled to the fullpage.js linked div. Right now, the navigation bar does follow you as you hover over each link, but it doesn't stay at the link once you click it.

I've pulled the navigation code from this codepen and edited it to be vertical - https://codepen.io/chriscoyier/pen/OqrzOe. It looks like it sets the original location of the highlight when it loads based on a class assignment. The problem is it doesn't update those values once you click on a link, so when you stop hovering, it goes back to the original link with the original class. I know it's a simple fix, I'm just not sure how to best update those original variables with the new values once a link is clicked.

I attached a codepen of what I'm currently working with below.

Codepen

Here's the jQuery code for the Magic Mark...

/* Add Magic Line markup via JavaScript, because it ain't gonna work without */
$("#example-one").append("<li id='magic-line'></li>");

/* Cache it */
var $magicLine = $("#magic-line");

 $magicLine
 .height($(".active").height())
 .css("top", $(".active a").position().top)
 .data("origTop", $magicLine.position().top)
 .data("origHeight", $magicLine.height());

$("#example-one li")
 .find("a")
 .hover(
function() {
  $el = $(this);
  topPos = $el.position().top;
  newHeight = $el.parent().height();
  $magicLine.stop().animate({
    top: topPos,
    height: newHeight
  });
},
function() {
  $magicLine.stop().animate({
    top: $magicLine.data("origTop"),
    height: $magicLine.data("origHeight")
  });
}
);

Answer 1

This might not be the best answer, but it kind of works. I recalled the first function on load and recalled the same functions when someone clicks on the links.

/* Cache it */
var $magicLine = $("#magic-line");
$magicLine
.height($(".active").height())
.css("top", $(".active a").position().top)
.data("origTop", $magicLine.position().top)
.data("origHeight", $magicLine.height());

$("#example-one li")
.find("a")
.hover(
function() {
 $el = $(this);
 topPos = $el.position().top;
 newHeight = $el.parent().height();
 $magicLine.stop().animate({
   top: topPos,
   height: newHeight
 });
},
function() {
 $magicLine.stop().animate({
   top: $magicLine.data("origTop"),
   height: $magicLine.data("origHeight")
 });
}
);

$( "li" ).click(function() {
$magicLine
.height($(this).height())
.css("top", $(this).position().top)
.data("newTop", $magicLine.position().top)
.data("newHeight", $magicLine.height());

$("#example-one li")
.find("a")
.hover(
  function() {
    $el = $(this);
    topPos = $el.position().top;
    newHeight = $el.parent().height();
    $magicLine.stop().animate({
      top: topPos,
      height: newHeight
    });
  },
  function() {
    $magicLine.stop().animate({
      top: $magicLine.data("newTop"),
      height: $magicLine.data("newHeight")
    });
  }
);
});

Here's an example on codepen - https://codepen.io/jcbbuller/pen/orKJvO. If you have better suggestions please let me know!

Answer 2

Use the fullpage.js option scrollBar:true and the magicline you want to use requires the scroll bar to be enabled.