使用滚动和点击 jQuery 函数的动画导航

Question

我正在尝试制作导航动画。起初导航不显示。您必须向下滚动视口，但要让它淡入多少像素。然后，当您单击导航中的 link 时，我试图通过使其从页面中间移动到页面顶部来为导航设置动画。

这里有一个fiddle来说明我的情况：http://jsfiddle.net/g8urqu8b/

& 这是我正在处理的实际网页：http://www.unf.edu/~n00804716/my-site/

在我的真实网站上，当点击导航栏中的 link 时，还会有一个 div 淡出，同时淡入之前未显示的新内容。这就是为什么在单击导航 link 时 window 必须滚动到顶部的原因；因此用户可以从文档顶部向下滚动新呈现的 div。

所以基本上，我想我是在问是否有办法通过单独的点击功能来终止此滚动功能：

      $(window).scroll(function() {
        if ( $(this).scrollTop() < 500) {
            $("ul.click").fadeOut(400);
        } else {
            $("ul.click").fadeIn(400);
        }
      });

Answer 1

让我看看我是否理解...

您想在单击 ul 元素时清除 window 的滚动功能吗？？

Answer 2

好的，如果我理解正确，this 就是您所期望的那种结果。

JavaScript:

$("div").hide();
function onScroll() {
    if ($(this).scrollTop() < 150) {
        $("div").fadeOut(400);
    } else {
        $("div").fadeIn(400);
    }
}
$(window).on('scroll', onScroll);
$("div").click(function () {
    $(this).animate({
        "top": "50px"
    }, 500)
    $(window).scrollTop(0);
    $(window).off('scroll', onScroll);
});

想法是能够使用 .on() (and .off()) jQuery 的方法来监听（或不监听）滚动事件。

.on() 和 .off() 方法的第二个参数是回调，在我们的例子中，它是一个名为 onScroll[=33 的函数=].

希望对您有所帮助。

使用滚动和点击 jQuery 函数的动画导航

Animating navigation with scroll and click jQuery functions

jquery

scroll

jquery-animate

skrollr