Question

我真的需要一些帮助。我是100％新手。我需要一些一般的帮助。我希望你们能帮忙清理代码。另外，我想做这个我现在无法工作的动画。代码实际上工作得很好。它做了我想做的事情。向下滚动，在导航到达顶部时粘贴。

如果向下滚动，会出现导航栏，另外您会看到左侧的功能区向下。 我的问题：向上滚动使其淡出，就像我想要的那样。但我无法让色带滑回来。 第二个问题：在我的一般帮助/清理代码中，动画在向上和向下滚动几次时会排队。

jQuery(document).ready(function($) {      var divh = document.getElementById('stnav').offsetHeight;
        var stickyHeaderTop = $('#stnav').offset().top;
        $('#logoheader').css('margin-top','-90px');
        $('#nav').hide();
        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#stnav').addClass("sticky");
                        $('#content').css('margin-top',divh);
                        $('#logoheader').animate({marginTop:"0"},800);
                        $('#nav').fadeIn(1500);
                } else  {
                        $('#stnav').removeClass("sticky");
                        $('#content').css('margin-top','0px');
                        $('#nav').fadeOut(1500);
                }
        })

    });

提前致谢！

Answer 1

试试这个版本。仅在第一次创建效果，而不是每次用户滚动时创建效果。另外，在创建新动画之前清除当前队列。

$(window).scroll(function(){
                    if( $(window).scrollTop() > stickyHeaderTop ) {
                            if(!$('#stnav').hasClass("sticky")){
                                $('#stnav').addClass("sticky");
                                $('#content').css('margin-top',divh);
                                $('#logoheader').stop(true, true).animate({marginTop:"0"},800);
                                $('#nav').stop(true, true).fadeIn(1500);
                            }
                    } else  {
                            if($('#stnav').hasClass("sticky")){
                                $('#stnav').removeClass("sticky");
                                $('#content').css('margin-top','0px');
                                $('#nav').stop(true, true).fadeOut(1500);
                            }
                    }
            })

Answer 2

<强>首先

在Firefox 10中，它对我来说都很好。

<强>第二

为防止动画重复播放，请自行使用stop()或stop(true, true) http://api.jquery.com/stop/

Answer 3

这应该可以解决问题......

jQuery(document).ready(function($) {
    var divh = document.getElementById('stnav').offsetHeight;
    var stickyHeaderTop = $('#stnav').offset().top;
    $('#logoheader').css('margin-top','-90px');
    $('#nav').hide();
    $(window).scroll(function(){
        if( $(window).scrollTop() > stickyHeaderTop ) {
            $('#stnav').addClass("sticky");
            $('#content').css('margin-top',divh);
            $('#logoheader').stop().animate({marginTop:"0"},800);
            $('#nav').stop().fadeIn(1500);
        } else  {
            $('#stnav').removeClass("sticky");
            $('#content').css('margin-top','0px');
            $('#logoheader').stop().animate({marginTop:"-90px"},800);
            $('#nav').stop().fadeOut(1500);
        }
    })
});

只需用上面的代码替换。

我添加了用于向上滑动的功能区的动画（你刚从else块中错过了它），并且我在动画和渐变之前添加了停止，因此它们会立即停止，而不是在完成下一个之前完成动画/褪色。

编辑：非常好的网站BTW！

Answer 4

我对这类问题的第一个想法是在开始新动画之前停止旧的动画（使用.stop（））。

jquery动画帮助，动画排队和代码清理

4 个答案: