Jquery fullpage.js站点上的垂直导航魔术标记突出显示

我正在尝试在一个fullpage.js驱动的站点上使用垂直导航突出显示。我希望高亮显示栏在你浏览链接时跟随光标，然后在你点击链接并滚动到fullpage.js linked div后停留在链接上。现在，导航栏会在你悬停在每个链接上时跟随你，但一旦你点击它，它就不会停留在链接上

我已经从这个代码笔中提取了导航代码，并将其编辑为垂直-。它看起来像是在基于类赋值加载时设置高亮显示的原始位置。问题是，一旦单击链接，它就不会更新这些值，因此当您停止悬停时，它会返回到原始类的原始链接。我知道这是一个简单的修复，我只是不知道如何最好地更新这些原始变量的新值，一旦链接被点击

我在下面附上了我目前正在使用的代码笔

这是魔术标记的jQuery代码

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

/*通过JavaScript添加魔线标记，因为没有它就无法工作*/
$（“#示例一”）.append（“
”）；
/*缓存它*/
变量$magicLine=$（“#幻线”）；
$magicLine
.height（$（“.active”）.height（）
.css（“顶部”，$（.active a”）.position（）.top）
.data（“origTop”，$magicLine.position（）.top）
.data（“origHeight”，$magicLine.height（））；
$（“例一里”）
.查找（“a”）
.悬停(
函数（）{
$el=$（此项）；
topPos=$el.position（）.top；
newHeight=$el.parent（）.height（）；
$magicLine.stop（）.animate({
上图：托普斯，
高度：新高度
});
},
函数（）{
$magicLine.stop（）.animate({
顶部：$magicLine.data（“origTop”），
高度：$magicLine.data（“origHeight”）
});
}
);

使用fullpage.js选项

scrollBar:true

并且您想要使用的magicline需要启用滚动条。

这可能不是最好的答案，但它可以正常工作。我回忆了加载时的第一个函数，并在有人点击链接时回忆了相同的函数

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

---

下面是一个关于代码笔的例子-。如果你有更好的建议，请让我知道

谢谢！我真的不知道该怎么做。fullpage.js上标题为scroll bar enabled的示例实际上没有显示…..的滚动条。无论如何，我都不是专家，所以我必须从其他的例子中脱颖而出，然后根据我的需要调整它们。我明白你在说什么。fullpage.js scrollbar选项并不是我想要的效果，我希望scroll nav是它自己的独立元素，我可以在其中设置样式并让它调整到各个链接。导航与选项

scrollbar:true

无关。是的，使用这样的选项时会有一个滚动条，并在链接的示例中加上int。也许你没有注意到这一点是因为你的浏览器或操作系统（例如Mac）。明白了，如果使用更新版本的chrome在更新的Mac上显示fullpage滚动条选项时出现问题，我宁愿临时创建一个跨浏览器/设备工作的解决方案。也许你应该从定义你所称的开始“一个在站点内工作的javascript滚动条功能”或“站点内导航上的突出显示条”。你可能指的是旁边的导航元素（通常是项目符号）吗？你有什么图片可以给我们看吗？显然，我必须更具体地选择DOM，但到目前为止它似乎有效。