Question

我正在尝试获得垂直导航突出显示，以在fullpage.js支持的网站上工作。我希望突出显示栏在您浏览链接时跟随光标，然后在单击它并滚动到fullpage.js链接的div后停留在链接上。现在，当您将鼠标悬停在每个链接上时，导航栏的确会跟随您，但是单击该链接后它不会停留在该链接上。

我已经从该密码笔中提取了导航代码并将其编辑为垂直-https://codepen.io/chriscoyier/pen/OqrzOe。它看起来像是根据类分配设置突出显示的原始位置。问题在于，一旦单击链接，它就不会更新这些值，因此，当您停止悬停时，它将返回到具有原始类的原始链接。我知道这是一个简单的解决方法，只是不确定单击链接后如何用新值最好地更新那些原始变量。

我在下面附加了当前正在使用的代码库。

Codepen

这是魔术标记的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")
  });
}
);

Answer 1

使用fullpage.js选项scrollBar:true，要使用的魔术线需要启用滚动条。

Answer 2

这可能不是最好的答案，但确实可行。我回忆起加载时的第一个功能，当有人单击链接时也回忆起了相同的功能。

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

以下是有关代码笔的示例-https://codepen.io/jcbbuller/pen/orKJvO。如果您有更好的建议，请告诉我！

垂直导航Magic Marker在fullpage.js网站上突出显示

2 个答案: