滚动更改导航活动类

Question

我正在尝试制作一个功能类似于此的导航栏： https : //jsfiddle.net/05jpxf45/，但使用的是Knockout。

这是我的视图模型中的相关代码：

    self.selectedTopicName = ko.observable("");

    self.selectedTopicName.subscribe(function () {
        self.updateHighlight();
    });

    self.updateHighlight = function () {
        $('.navigation-list li').each(function (index) {
           var navTopic = $(this).attr('class').split(/\s+/)[0];
            $(this).removeClass('highlight');

            if (self.selectedTopicName().indexOf(navTopic) >= 0) {
                $(this).addClass('highlight');
            }
        });
    };

    self.scrollToPage = function (sectionRef) {
        var target = $(sectionRef);
        if (target.length) {
            console.log(target.position().top);
            $('html, body').stop().animate({
                scrollTop: target.position().top
            }, 1000);
        }

（每当用户滚动时，都会在我的视图中设置self.selectedTopicName，以便对该位进行排序）。

<nav class="floating-nav-container">
<ul data-bind="foreach: sideMenuPageUnitData, attr: { class: 'navigation-list' }">
    <li data-bind="attr: { class: pageRef }">
        <a data-bind="attr: { href: pageData[0].name }, text: name, click: function (data, event) { $parent.scrollToPage('#section_' + pageData[0].name) }"></a>
    </li>
</ul>
<span data-bind="text: selectedTopicName()"></span>
</nav>

（这是我想要的，我只是将其放在此处以显示我的轮廓。）

尽管这种方法可行，但似乎并不是在淘汰赛中“最佳”的方法，我想知道是否有人会介意给我一些有关如何做的建议。

基本上，每次selectedTopicName更新时，这意味着用户已经向上或向下滚动了页面，因此，此刻我使用订阅，然后遍历元素，但这看起来并不优雅。

谢谢！

Answer 1

当使用Knockout对使用内置绑定不容易完成的DOM进行自定义行为时，应创建自定义绑定。 我已将您的代码转换为自定义绑定（无论如何，对于滚动部分）：

ko.bindingHandlers.onScroll = {
  init: function(element) {
    $(document).on("scroll", function() {
      var scrollPos = $(document).scrollTop();
      $(element).find('a').each(function() {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
          $(element).find('a').removeClass("active");
          currLink.addClass("active");
        } else {
          currLink.removeClass("active");
        }
      });
    });
  }
};

https://jsfiddle.net/05jpxf45/1/