在CSS中从顶部到底部过渡图像

Question

我想从上到下移动我的图像。现在它是从左下到上的过境。

HTML

<header>
<img src="http://res.cloudinary.com/paresh/image/upload/v1464936481/imgpsh_fullsize_aab4vm.png"><br/>
<img src="http://res.cloudinary.com/paresh/image/upload/v1464936481/imgpsh_fullsize_aab4vm.png"><br/>
<img src="http://res.cloudinary.com/paresh/image/upload/v1464936481/imgpsh_fullsize_aab4vm.png"></header>

JS

$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('header').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
  }
});

CSS

header{
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 72px;
  line-height: 108px;
  color: #fff;
  font-family: 'PT Sans', sans-serif;
  opacity : 0;
}

header.sticky {
  font-size: 24px;
  line-height: 48px;
  text-align: left;
  padding-left: 20px;
  transition: all 0.6s ease;
  opacity : 1;
  animation-direction: normal;
}

body{
  height:1000px
}

Codepen：http://codepen.io/anon/pen/ezNZQV

Answer 1

将padding-left: 20px;添加到header上header.sticky。要从上到下进行动画处理，请将bottom:0;添加到header。

代码（https://jsfiddle.net/6kbcp54m/1/）：

＆＃13;

＆＃13;

$(window).scroll(function() {
  if ($(this).scrollTop() > 1){  
    $('header').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
  }
});

＆＃13;

header {
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 72px;
  line-height: 108px;
  color: #fff;
  font-family: 'PT Sans', sans-serif;
  opacity : 0;
  padding-left: 20px;
  bottom:0;
}
header.sticky {
  font-size: 24px;
  line-height: 48px;
  text-align: left;
  padding-left: 20px;
  transition: all 0.6s ease;
  opacity : 1;
  animation-direction: normal;
}
body {
  height:1000px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <img src="http://res.cloudinary.com/paresh/image/upload/v1464936481/imgpsh_fullsize_aab4vm.png"><br/>
  <img src="http://res.cloudinary.com/paresh/image/upload/v1464936481/imgpsh_fullsize_aab4vm.png"><br/>
  <img src="http://res.cloudinary.com/paresh/image/upload/v1464936481/imgpsh_fullsize_aab4vm.png">
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需将CSS更新为此。

header{
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  font-size: 24px;
  color: #fff;
  font-family: 'PT Sans', sans-serif;
  opacity : 1;

}

header.sticky {
  top:300px;
  text-align: center;
  transition: all 0.6s ease;
  opacity : 1;
  animation-direction: normal;
}

这可能会对你有所帮助。我删除了行高。而且只是占据了最高位置。