javascript - 在 jquery 调整图像大小中滑动上/下效果 - 如何避免

Question

在 jquery 中应用向上/向下滑动效果时，图像会随着菜单向上/向下滑动而调整大小，但我想要图像向下/向上滑动效果，而不是调整大小。

如何纯滑动图片？

谢谢

$(document).ready(function(){ 
	$('.logo').hide(); 
});

$(document).ready(function () {  
  $(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= 30) {
      // if so, ad the fixed class
      $('.menu').addClass('fixed');
	  $('.menu').slideDown();	  
	  $('.logo').slideDown();	  
    } else {
      // otherwise remove it
      //$('.logo2').removeClass('fixed'); 
	  $('.menu').slideUp();	  
	  $('.logo').slideUp();	  
    }
  });
});

.menu.fixed {
	position:fixed;
	background:#000;
	width:100%;
	height: 100px;
	z-index:100;
	padding: 0px;
	margin: 0px;
}

.logo {
	margin-left:50%;	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="menu">
<img src="http://www.digifloor.com/wp-content/uploads/2013/10/google-logo.png" height="80px" class="logo" />
</div>

dadadasdassdasdadasdasasdasd <br /><br /><br /><br /><br /><br />
dadadasdassdasdadasdasasdasd <br /><br /><br /><br /><br /><br />
dadadasdassdasdadasdasasdasd <br /><br /><br /><br /><br /><br />
dadadasdassdasdadasdasasdasd <br /><br /><br /><br /><br /><br />
dadadasdassdasdadasdasasdasd <br /><br /><br /><br /><br /><br />
dadadasdassdasdadasdasasdasd <br /><br /><br /><br /><br /><br />
dadadasdassdasdadasdasasdasd <br /><br /><br /><br /><br /><br />
dadadasdassdasdadasdasasdasd <br /><br /><br /><br /><br /><br />
dadadasdassdasdadasdasasdasd <br /><br /><br /><br /><br /><br />
dadadasdassdasdadasdasasdasd <br /><br /><br /><br /><br /><br />
dadadasdassdasdadasdasasdasd <br /><br /><br /><br /><br /><br />
dadadasdassdasdadasdasasdasd <br /><br /><br /><br /><br /><br />

http://jsfiddle.net/1j24z3va/

Answer 1

slideUp()/slideDown() 不会帮助你应该使用 animate() .

$(document).ready(function() {
  $(window).scroll(function(event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= 30) {
      // if so, ad the fixed class
      $('.menu').stop().animate({
        top: '0'
      }, 500);
    } else {
      // otherwise remove it
      $('.menu').stop().animate({
        top: '-100px'
      }, 500);

    }
  });
});

.menu {
  position: fixed;
  background: #000;
  width: 100%;
  height: 100px;
  padding: 0px;
  margin: 0px;
  top: -100px;
}
.logo {
  margin-left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="menu">
  <img src="http://www.digifloor.com/wp-content/uploads/2013/10/google-logo.png" height="80px" class="logo" />
</div>

dadadasdassdasdadasdasasdasd
<br />
<br />
<br />
<br />
<br />
<br />dadadasdassdasdadasdasasdasd
<br />
<br />
<br />
<br />
<br />
<br />dadadasdassdasdadasdasasdasd
<br />
<br />
<br />
<br />
<br />
<br />dadadasdassdasdadasdasasdasd
<br />
<br />
<br />
<br />
<br />
<br />dadadasdassdasdadasdasasdasd
<br />
<br />
<br />
<br />
<br />
<br />dadadasdassdasdadasdasasdasd
<br />
<br />
<br />
<br />
<br />
<br />dadadasdassdasdadasdasasdasd
<br />
<br />
<br />
<br />
<br />
<br />dadadasdassdasdadasdasasdasd
<br />
<br />
<br />
<br />
<br />
<br />dadadasdassdasdadasdasasdasd
<br />
<br />
<br />
<br />
<br />
<br />dadadasdassdasdadasdasasdasd
<br />
<br />
<br />
<br />
<br />
<br />dadadasdassdasdadasdasasdasd
<br />
<br />
<br />
<br />
<br />
<br />dadadasdassdasdadasdasasdasd
<br />
<br />
<br />
<br />
<br />
<br />