jQuery - 滚动时的粘性标题和动画徽标答案

【问题标题】：jQuery - Sticky header and animated logo when scrollingjQuery - 滚动时的粘性标题和动画徽标
【发布时间】：2012-06-27 10:53:06
【问题描述】：

我有一个 id="header" 的 div 和另一个 id="logo" ("position:absolute") 的 div，其内部高于标题 div。

向下滚动页面时，我想将标题粘贴到窗口顶部（这没有问题）并且将徽标滑动到顶部-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);
    }
});

谢谢。

【问题讨论】：

标签： jquery scroll jquery-animate

【解决方案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

【讨论】：

效果很好！当用户滚动页面时，只需使用您的代码将动画放在固定标题上。