Question

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

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

我希望这样做时可以设置动画（最好是向上滑动并向下滑动），并且更愿意使用CSS3来实现...

这是我到目前为止的一个小提琴，但是因为我是一个查询菜鸟，不知道如何处理事情...... http://jsfiddle.net/bnsUB/

修改我忘了提到我也有这个DIV中的内容，当容器向上/向下滑动时需要调整衬垫等。因此，如果这些填充值可以缩小/增长，那么这将是一个额外的奖励

Answer 1

您需要根据窗口的当前$.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 }等）

Answer 2

$(window).scroll(function()
{
    if  ($(window).scrollTop() == $(document).height() - $(window).height())
      {
        $('#tt').animate({height:'90px'}, 500);
      }

});

Answer 3

这是香草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 */
}

用户使用动画滚动175px后缩小固定Div

3 个答案: