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

Slide up/down effect in jquery resizes image - how to avoid

本文关键字：图像何避免调整上下 jquery 更新时间：2023-11-25

在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/

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 />