0

我有一个固定在页面顶部的 div，它包含到网站的导航。它的高度为 175 像素。当您向下滚动页面时，此 DIV 将继续显示。

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

我希望在这样做时制作动画（最好向上滑动和向下滑动），并且更喜欢使用 CSS3 来这样做......

这是我到目前为止所拥有的一个小提琴，但因为我是一个查询菜鸟，不知道该怎么做...... http://jsfiddle.net/bnsUB/

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

4

3 回答 3

3

您需要根据$.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);
    }
});

这里是：http: //jsfiddle.net/bnsUB/4/

如果您想为任何其他内容（例如填充和边距）设置动画，只需将它们作为值添加到您传递给.animate()函数的对象中。（例如 -{ height: 175, 'padding-top': 20, 'margin-top': 10 }等等）

于 2012-08-29T09:32:47.537 回答
0 
$(window).scroll(function()
{
    if  ($(window).scrollTop() == $(document).height() - $(window).height())
      {
        $('#tt').animate({height:'90px'}, 500);
      }

});
于 2012-08-29T09:41:09.050 回答
0

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

JS：

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");
  }
}

CSS：

#header{
  transition: 0.2s;
  height: 175px;
}
#header.narrow{
  height: 90px !important;
}
#header .anyelementclass{
  transition: 0.2s;
}
#header.narrow .anyelementclass{
  /* any style here */
}
于 2018-12-03T12:39:28.453 回答