0

当用户滚动到它们时，我正在尝试为页面上的几个标题设置动画（淡入），但是当我到达第一个标题时，它会将它们全部淡入，无论我是否已经到达它们。

有人可以帮我弄清楚我哪里出错了吗？jQuery 看起来像：

$(window).scroll( function(){

    $('.section').each( function(i){

        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        if( $('hgroup').is('.heading1') && bottom_of_window > bottom_of_object ){

            $('.heading1').animate({'opacity':'1'},1000);                 
        }
        if( $('hgroup').is('.heading2') && bottom_of_window > bottom_of_object ){

            $('.heading2').animate({'opacity':'1'},1000);                 
        }
    });         


});

和标记：

<section class="section">
<hgroup class="heading1">
    <h1>Title</h1>
    <h2>Sub-Title</h2>
</hgroup>
</section>
<section class="section">
<hgroup class="heading2">
    <h1>Title</h1>
    <h2>Sub-Title</h2>
</hgroup>
</section>
4

1 回答 1

0

当您执行条件来确定 hgroup 是 heading1 还是 heading2 或其他什么时，您并没有指定特定的 hgroup，因此条件将始终为真（假设页面上存在 heading1 或 heading2。所以那些 .is 条件是无用的。

编辑：执行console.write 或警报或断点以查看两个高度的值。看看你能不能找到一些奇怪的东西。

例如..

alert('Bottom of Object: ' + bottom_of_object + '\nBottom Of Window: ' + bottom_of_window);

这样做并将其放入您的滚动功能中，以便在您滚动时可以查看一些值。这应该会引导你走上正确的道路。

编辑编辑：请参阅此页面上的“正确”答案：检查滚动后元素是否可见

于 2013-09-12T13:43:05.833 回答