Question

所以我是jQuery的新手，我想我已经取得了一些进展但是我遇到了以下代码的问题：

$(window).scroll(function(){
    var $header = $('#header');
    var $st = $(this).scrollTop();
    console.log($st);

    if ($st < 250) {
        console.log($st);
        $header.height(300 - $st);
    } else {
        $header.hover(function(){
            $(this).height(300);
        }, function (){
            $(this).height(50);
        });
    }
}).scroll();

http://jsfiddle.net/J4rsj/

所以一切似乎都工作正常，'标题'缩小滚动并在悬停时扩展和收缩，但是我发现了一个错误。在页面加载时不会发生这种情况，但是一旦向下滚动页面并再次返回顶部，标题（悬停时）大小下降到。高度（50）即使从我的理解悬停应该只触发一次scrollTop （）大于250。

我已经记录了scrollTop（）的值，以确保它不是一个累积的数字，并尝试了各种不同的方法，但我无法让它工作/理解问题。最后，我想让悬停效果的动画变得不那么笨拙，但那是另一天。

任何帮助都会非常感激！

Answer 1

有几种方法可以解决这个问题，但只是让您理解这个概念，当您将hover事件监听器附加到$header后超出$st < 250它不会当你向后滚动时消失。悬停侦听器和关联的函数保持与$header的连接，因此无论您在窗口中滚动的位置如何，hover函数仍将处于活动状态。解决此问题的一种方法是在悬停方法中包含对scrollTop()的检查。或者，您可以尝试在向上滚动时删除hover侦听器。

Answer 2

试试这个：

<强> Working Example

$(window).scroll(function () {
    var $header = $('#header');
    var $st = $(this).scrollTop();
    if ($st < 250) {
        $header.height(300 - $st);
        $header.off(); // remove all events from #header
    } else {
        $header.on({ // on mouseenter & mouseleave, note: .on({hover: doesn't seem to work
            mouseenter: function () {
                $(this).height(300);
            },
            mouseleave: function () {
                $(this).height(50);
            }
        });
    }
});

.on()和.off()

的文档

如果您需要移除某些事件并保留其他事件，您也可以将.off（）与指定的事件一起使用：$header.off('mouseleave');。

Answer 3

你们两个都帮我解决了我的问题。球门柱在这个过程中发生了变化，所以这就是我最终的结果。

$(window).scroll(function(){

    var $header = $('#header');
    var $st = $(this).scrollTop();
    var $headerS = 300 - $st;

    $header.height($headerS);

    $header.hover(function(){

        $(this).stop().animate({height:300}, 300);

        }, function (){

        $(this).stop().animate({height:$headerS}, 600);

    });

}).scroll();

我还设置了一个最小高度：50px;对于CSS中的#header元素。它似乎工作正常，并有这个额外的好处：

当$ st是＆lt; 250px然后悬停仍然将盒子扩展到总高度并减少向下以与文章的顶部对齐。参见：

http://jsfiddle.net/rufusdenne/J4rsj/3/

.scrollTop（），条件语句在悬停时中断

3 个答案: