滾動更改導航活動類

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/