Question

我在向下滚动页面时使用Waypoints（github.com/imakewebthings/waypoints）更改选定的导航选项。但是我正在切换到导航的选择下拉列表。我想知道是否可以使用航点添加此功能，并在滚动浏览这些部分时更改我选择的所选选项。

以下是在桌面上更改导航功能的功能

function getRelatedNavigation(el){
  return $('.desktopnav ul li a[href=#'+$(el).attr('id')+']');
}

Answer 1

您要做的是检查文档中的所有元素y位置并返回刚刚传递的元素？

function getRelatedNavigation() {
    var elements = $('.anchor');
    var currentScroll = $(document).scrollTop();
    elements.each(function(index,value) {
        if (currentScroll > $(value).position.y) return $(value);
    });
});
$('.desktopnav ul li a[href="#'+getRelatedNavigation().attr('id')+'"]').addClass('selected').siblings().removeClass('selected');
$('#mobileselect').children().removeAttr('selected');
$('#mobileselect').children('[value="'+getRelatedNavigation().attr('id')+'"]').attr('selected','selected');

我不知道你用什么标签为你的航点或锚点。在上面的例子中，我将它们标记为class ='anchor'

所以

// Navigation
<ul class='desktopnav'>
    <li><a href="#something">something</a></li>
    <li><a href="#other">other</a></li>
</ul>

//// Ways down
<div id='something' class='anchor'>some content</div>
<div id='other' class='anchor'>other content</div>

滚动时更改选择选项

1 个答案: