Javascript 在用户用动画滚动175px后收缩固定Div

我有一个固定在页面顶部的div，用于保存网站的导航。它的高度是175px。向下滚动页面时，此DIV将保持显示状态

我希望当用户向下滚动页面175px时，这个div收缩到90px的高度，并在向下滚动页面时保持在90px。当它们向上滚动到顶部时，我希望DIV恢复到原来的175px高度

我想这是动画时这样做（最好是幻灯片向上和向下），并希望使用CSS3这样做

这是我到目前为止所拥有的一把小提琴，但因为我是一个质疑者，不知道如何处理事情

编辑：

---

我忘了提到，我在这个分区中也有内容，需要在容器上下滑动时调整其填充物等。因此，如果这些填充值也可以收缩/增长，那么这将是一个额外的好处

您需要根据窗口的当前值触发一个操作

比如：

$(document).scroll(function(){
    if ($(this).scrollTop()>175){
        // animate fixed div to small size:
        $('.wrapper').stop().animate({ height: 90 },100);
    } else {
        //  animate fixed div to original size
        $('.wrapper').stop().animate({ height: 175 },100);
    }
}); 

下面是：

---

如果要为任何其他对象（如填充和边距）设置动画，只需将它们作为值添加到传递给

.animate（）

函数的对象中即可。（例如-

{height:175，'padding top'：20，'margin top'：10}

等）

您需要根据窗口的当前

$.scrollTop（）

值触发操作

比如：

$(document).scroll(function(){
    if ($(this).scrollTop()>175){
        // animate fixed div to small size:
        $('.wrapper').stop().animate({ height: 90 },100);
    } else {
        //  animate fixed div to original size
        $('.wrapper').stop().animate({ height: 175 },100);
    }
}); 

下面是：

---

如果要为任何其他对象（如填充和边距）设置动画，只需将它们作为值添加到传递给

.animate（）

函数的对象中即可。（例如-

{height:175，'padding top'：20，'margin top'：10}

等）

这里是一个香草JS和CSS动画的解决方案：

JS:

CSS:

---

下面是一个香草JS和CSS动画解决方案：

JS:

CSS:

---

谢谢我还没有测试过这个。请参阅有关调整容器内内容的填充物等的更新问题：）用户高度：'90px'，左填充：20等动画功能谢谢。我还没有测试过这个。请参阅关于调整容器内内容物的填充物等的更新问题：）用户高度：'90px'，左填充：20等等在动画功能中，我似乎在效果期间和之后得到了细细的白线，在我的机器上保持可见…这种方法会影响CPU性能吗？这不会太占用处理器。。。。您使用的浏览器和操作系统是什么？它在OSX/Chrome和Firefox上运行得很好。我在MacLion上使用Chrome。刚刚入住FF，效果也不错。我在Chrome的开发频道（不幸的是），这不是我第一次看到有问题的事情发生：（想要退出开发版本，只想要一个稳定的Chrome浏览器lol！我会测试你建议的内容：填充等等。这就是为什么开发频道不是你每天都应该使用的开发工具：）当我把它放进我的网页时，它就不起作用了。开发工具说：未捕获的语法错误：意外标记非法任何想法？在影响期间和之后，我似乎得到了在我的机器上可见的细白线…此方法会影响CPU性能吗？这不会太占用处理器。。。。您使用的浏览器和操作系统是什么？它在OSX/Chrome和Firefox上运行得很好。我在MacLion上使用Chrome。刚刚入住FF，效果也不错。我在Chrome的开发频道（不幸的是），这不是我第一次看到有问题的事情发生：（想要退出开发版本，只想要一个稳定的Chrome浏览器lol！我会测试你建议的内容：填充等等。这就是为什么开发频道不是你每天都应该使用的开发工具：）当我把它放进我的网页时，它就不起作用了。开发工具说：uncaughtsyntaxerror:uncontractedtoken非法，有什么想法吗？

window.onscroll = function () {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 175 || document.documentElement.scrollTop > 175) {
    document.getElementById("header").classList.add("narrow");
  } else {
    document.getElementById("header").classList.remove("narrow");
  }
}

#header{
  transition: 0.2s;
  height: 175px;
}
#header.narrow{
  height: 90px !important;
}
#header .anyelementclass{
  transition: 0.2s;
}
#header.narrow .anyelementclass{
  /* any style here */
}