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

Question

When applying the slide up/down effect in jquery , the image is resized as much the menu slides up/down, but i want the slide effect with the image going down/up, not resizing.

How to slide the image purely?

Thanks

 $(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() won't help you should use 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 />