Question

我正在尝试动画导航。起初导航不会显示。您必须向下滚动视口，但必须有很多像素才能淡入。然后，当您单击导航中的链接时，我试图通过使其从页面中间移动到页面顶部来为导航设置动画。

这是一个说明我情况的小提琴：http://jsfiddle.net/g8urqu8b/

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

在我的真实网站上，当点击导航中的链接时，还有一个我淡出的div，当我淡入一个以前没有显示过的新的。这就是为什么在点击导航链接时窗口需要scrollTop的原因;这样用户就可以从文档顶部向下滚动新呈现的div。

基本上，我相信我问是否有办法用单独的点击功能来杀死这个滚动功能：

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

Answer 1

好的，如果我理解正确， 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() （以及 .off() ）jQuery方法来监听（或不听）滚动事件。

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

希望这有帮助。

Answer 2

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

当您单击ul元素时，您想要清除窗口的滚动功能？

使用滚动动画导航并单击jQuery函数

2 个答案: