0

所以我是 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/

所以一切似乎都正常，“标题”在滚动时缩小并在悬停时扩展和收缩，但是我发现了一个错误。它不会在页面加载时发生，但是一旦您向下滚动页面并再次返回顶部，标题（悬停时）尺寸会缩小到 .height(50) 即使据我所知，悬停应该只触发一次 scrollTop () 大于 250。

我已经记录了 scrollTop() 的值，以确保它不是一个累积的数字，并尝试了各种不同的方法，但我无法让它工作/理解问题。最终，我希望将悬停效果设置为不那么笨拙，但那是另一天的事了。

任何帮助将非常感激！

4

3 回答 3

1

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

于 2013-09-11T21:46:57.863 回答
0

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

$(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();

我还设置了一个 min-height: 50px; CSS中的#header元素。它似乎工作正常并且有这个额外的好处：

当 $st < 250px 时，悬停仍然会将框扩展至总高度并向下缩小以与文章顶部对齐。看：

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

于 2013-09-12T08:04:33.010 回答
0

尝试这个：

工作示例

$(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');如果您需要删除某些事件并保持其他事件不变。

于 2013-09-11T22:59:21.453 回答