0

我有下一个代码，当用户到达页面滚动的某个点时，我可以添加和删除一个类，我想为标题设置动画

 $(document).scroll(function (e) {
var value = $(this).scrollTop();
if (value > 150) {
    $( "body" ).addClass( "scroll" );
    $( "header.head" ).stop().animate({top:'-30px'}); 
 }
else {
    $( "body" ).removeClass( "scroll" );
    $("header.head" ).stop().animate({top:'0px'});
 }

我的问题是初始动画（顶部：-30px）效果很好，但是当我向上滚动时，顶部：0px 不起作用。而且，当我向上滚动然后返回时，顶部：-30px 不会重复

你可以在这里看到它[示例] http://www.pabloscillia.com.ar/clientes/yumyum/ 1

我的意图是，在 >150 时执行一个动画，然后，当用户 <150 时执行另一个（也不知道为什么动画有时更长，有时更短）

我真的不知道在哪里寻找才能使它工作在此先感谢

4

2 回答 2

0

给 header 两个类，default 和 fixed，将默认类添加到 header<header class="default">并在 CSS 中编写 class.fixed {...}以在修复时设置 header 样式。这是一个小提琴

<header class="default"></header>


header {
  background: #555;
  width: 100%;
  height: 120px;
}
.default {
  /* Add some properties to defaut if you wish */
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
}


$(function() {

  var header = $('header');
  var headOff = header.offset();

  $(window).scroll(function() {

    if($(this).scrollTop() > 150 + headOff.top && header.hasClass('default')) {
      header.fadeOut('fast', function() {
        $(this).removeClass('default').addClass('fixed').fadeIn('fast').animate({ height: '70px'}, 350);
      });
    } 
    else if($(this).scrollTop() <= 150 + headOff.top && header.hasClass('fixed')) {
      header.fadeOut('fast', function() {
        $(this).removeClass('fixed').addClass('default').fadeIn('fast').animate({ height: '120px'}, 350);
      });
    }
  });

});
于 2013-09-21T00:57:28.293 回答
0

将代码替换为以下内容：

var $head = $("header.head"),
    $body = $("body"),current=0;

$(document).scroll(function (e) {
    var value = $(this).scrollTop();
    if (value > 150) {
        if (current==1) return;
        current=1;
        $head.stop();
        $body.addClass("scroll");
        $head.css({top: -150});
        $head.animate({
            top: '-30'
        },"fast");
    } else {
        if (current==2) return;
        current=2;
        $head.stop().animate({
            top: '-150'
        }, "fast",endScrollClass);
    }
});

function endScrollClass() {
    $body.removeClass("scroll");
    $head.css('top',0)
}

这将在 animate() 结束时运行 endScrollClass，而不是每次都运行动画，等等，我在这里做了小提琴；

于 2013-09-21T00:29:30.813 回答