Question

我有一个带有id =“header”的div，另一个div id =“logo”（“position：absolute”），其内部高于标题div。

当向下滚动页面时，我想将标题粘贴到窗口顶部（没有问题） AND 将徽标滑到顶部-125px以便只有一小部分标识的一部分是可见的。

向下滚动时向下滑动不会导致错误，但是当我向后滚动到顶部时，我有一个很大的延迟，将#logo滑回原来的位置。

这是我的代码：

jQuery的：

var top = jQuery('#header').offset().top;
jQuery(window).scroll(function() {
     if(jQuery(this).scrollTop() > top) {
        jQuery('#header').addClass('header_fixed');
        jQuery('#content').addClass('content_fixed');           
    } else {
        jQuery('#header').removeClass('header_fixed');                  
        jQuery('#content').removeClass('content_fixed');
    }
    if(jQuery('#header').hasClass('header_fixed')) {
        jQuery('#logo').animate({top:'-125px'}, 500);
    } else {
        jQuery('#logo').animate({top:'0px'}, 500);
    }
});

谢谢。

Answer 1

要快速返回滚动，请尝试以下操作：

var scroll = 0;
var scrolled = false;

jQuery(window).bind('scroll', function(e) {
     if(jQuery(this).scrollTop() > scroll){
         if(scrolled == false){
            jQuery('#logo').animate({top:'-125px'}, 500);
            scroll = jQuery(this).scrollTop();
         }       
        scrolled = true;
    } else {
        if(scrolled == true){
            jQuery('#logo').animate({top: 0}, 500);
            scroll = 0;
        }       
        scrolled = false;            
    }
});

我不确定你想要的是什么，这是一个例子EXAMPLE

jQuery - 滚动时粘滞的标题和动画徽标

1 个答案: