Question

我正在玩jQuery scrollTo，尝试制作一个具有完整主体部分的平滑滚动网站。滚动和过渡工作正常，除非从第一部分向上滚动，脚本将导航面板作为一个部分突出显示，而不是停留在第1部分。

以下是导航的样子：

<div id="header">
  <ul id="nav">
    <li><a href="#section-1">Section 1</a>
    </li>
    <li><a href="#section-2">Section 2</a>
    </li>
    <li><a href="#section-3">Section 3</a>
    </li>
  </ul>
</div>

这是scroll.js：

var $current, flag = false;

$(function() { 
$('#nav').onePageNav();

$('body').mousewheel(function(event, delta) {
    if (flag) { return false; }
    $current = $('div.current');

    if (delta > 0) {
        $prev = $current.prev();

        if ($prev.length) {
            flag = true;
            $('body').scrollTo($prev, 500, {
                onAfter : function(){
                    flag = false;
                }
            });
            $current.removeClass('current');
            $prev.addClass('current');
        }
    } else {
        $next = $current.next();

        if ($next.length) {
            flag = true;
            $('body').scrollTo($next, 500, {
                onAfter : function(){
                    flag = false;
                }
            });
            $current.removeClass('current');
            $next.addClass('current');
        }
    }

    event.preventDefault();
});

});

我似乎无法找到从滚动中排除导航面板的方法，因此当在第一个面板上时，向上滚动不会产生任何影响。

此外，当您在较低部分刷新页面时，是否有办法将当前可见部分重置为第一部分，因为现在窗口保持在当前的任何一个部分。

非常感谢任何帮助！

Answer 1

您没有检查prev和next是否仍然是有效元素。这是一个更好的方法，如果有任何小问题，我们会对其进行调整。

$(function() { 
  $('#nav').onePageNav();

  $('body').mousewheel(function(event, delta) {
    event.preventDefault();

    var $current = $('div.current');
    if ($current.is(':animating')) return;

    var $next = delta > 0 ? $current.prev() : current.next();
    if (!$next.hasClass('section')) return;

    $current.removeClass('current');
    $next.addClass('current');
    $(window).scrollTo($next, 500);
  });
});

顺便说一句，如果你使用scrollTo，使用onePageNav是一种浪费。您可以通过包含使用scrollTo的localScroll并且不重新实现整个内容来实现相同的目标。

或者，你可以很快实现它：

// Bind to the click of all links with a #hash in the href
$('a[href^="#"]').click(function(e) {
  e.preventDefault();
  $(window).stop(true).scrollTo(this.hash, {duration:500, interrupt:true});
});

jQuery scrollTo限制给孩子们

1 个答案: