javascript - CSS Div 滚动高度

标签 javascript css scrolltop

我正在尝试重现这里看到的效果:http://jsfiddle.net/surendraVsingh/aATHd/2/

但我正在尝试为高度设置动画。出于某种原因,当我向下滚动时它工作正常,但在向上滚动时,高度不会变回正常。有什么想法吗?

这是我现在拥有的:http://justinledelson.com/new/

$(window).scroll(function(){
    if ($(this).scrollTop() > 250){
     $('#header').animate({"height":"100px"}, 1500);
  } 
  else{
    $('#header').animate({"height":"470px"}, 1);
  }
});

谢谢!

最佳答案

虽然我说这不是你问题的解决方案,但看起来它实际上是一个解决方案。

在每个 Action 后添加一个类。每种情况下都有 expandedcollapsed 之类的东西,并在执行动画之前检查该类是否存在。这样,只有在必要时才会触发动画。

这样可以避免多次触发动画排队动画。这就是为什么如果您多次向下滚动并返回顶部,“展开”动画会在您向上滚动很久之后触发(它必须等待每个“折叠”动画结束)

我的测试是:

$(window).scroll(function(){ 
    var $header = $('#header');
    if ($(this).scrollTop() > 50){  // x should be from where you want this to happen from top//
     if (!$header.hasClass('collapsed')) {
       $header.animate({"height":"100px"}, 1500, function() {
         $header.toggleClass('expanded collapsed');
       });
     }
    } 
    else{
      if (!$header.hasClass('expanded')) {
        $header.animate({"height":"470px"}, 1, function() {
         $header.toggleClass('expanded collapsed');
       });
      }
    }

});

header 应该以 expanded class 开头

关于javascript - CSS Div 滚动高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16994982/

相关文章:

javascript - 传单不会显示我的标记, "TypeError: t is null"

javascript - 如何将 iframe 数据传递给父窗口

html - 列表样式图像未垂直对齐

css - float div 后无法将 div 居中

jQuery 添加和删除 $(window).scroll(function()?

javascript - 如何仅验证电子邮件的登录用户

javascript - 搜索过滤器在 setState : React JS 上的 react 表中不起作用

css - 是:not possible on a wildcard attribute selector

javascript - 当元素到达页面顶部时淡入淡出?

jQuery - 没有动画的 ScrollTop