Question

首次使用此处。我通常能够找到问题的答案，但我很难搞清楚这个问题。

目标：

我有一个带有侧边栏导航的页面布局，点击后会向下滚动到页面上的元素。但是，如果用户只是向下滚动页面到特定元素#id，我希望导航中的相应链接变为.active。导航链接和相应元素通过element#id和a[name]共享相同的值。

类似于： NikeBetterWorld.com

以下HTML示例：

<nav>
    <a name="value">Link</a>
</nav>

<section id="value">
    content goes here
</section>

显然，还有更多的部分，链接，元素等。但这是它的要点。因此，当用户向下滚动到section#value时，a[value]将使该课程处于有效状态。

我之前在这里找到了一个有所帮助的答案，但我仍然遇到了一些问题。 See this link for more information

当前的Javascript / jQuery：

$(document).scroll(function() {
    var cutoff = $(window).scrollTop();
    var cutoffRange = cutoff + 200;

    // Find current section and highlight nav menu
    var curSec = $.find('.current');
    var curID = $(curSec).attr('id');
    var curNav = $.find('a[name='+curID+']');
    $(curNav).addClass('active');

    $('.section').each(function(){
        if ($(this).offset().top > cutoff && $(this).offset().top < cutoffRange) {
            $('.section').removeClass('current')
            $(this).addClass('current');
            return false; // stops the iteration after the first one on screen
        }
    });
});

问题：

虽然上面的代码在某种程度上起作用，但我遇到了一个大问题。我无法获得整个元素.current。如果元素的顶部离开窗口，它将丢失该类。我通过为新元素添加一个范围来修复它，但是现在当用户向上滚动时，前一个元素将不会获得类.current，直到元素的顶部到达窗口的顶部。如果窗口的显性部分在可见时获得.current类，我会更喜欢它。

非常感谢任何帮助，想法或建议。

提前致谢！

Answer 1

听起来你想检查部分的底部边缘而不是顶部。试试这个并一起删除范围：

if($(this).offset().top + $(this).height() > cutoff){

编辑：创造了一个小提琴。我认为这就是你所描述的。

http://jsfiddle.net/pdzTW/

Answer 2

yeeeahhh！得到了解决方案！

我只是改变：

if ($(window).scrollTop() >= $(section).offset().top) {

到

if ($(window).scrollTop() + 80 >= $(section).offset().top) {

Answer 3

我总是使用jQuerys“过滤器”功能来返回当前部分。

$currSection = $('section').filter(function() {
    var $this = $(this);
    var offset = $this.offset().top;
    var view = winHeight / 2;

    return scrollTop >= offset - view && offset + ($this.outerHeight() - view) >= scrollTop;
});

将其包裹在滚动侦听器中，如：

$(window).on('scroll', function() {
    // here we go ...
});

多数民众赞成。

使用jQuery查找当前可见元素并更新导航

3 个答案: