如何将我的按钮设置为固定位置并在向下滚动时设置动画,然后在向上滚动jquery时再次设置动画

时间:2016-11-02 03:51:03

标签: jquery html css animation

如何在向下滚动时将我的按钮设置为固定位置,然后在jquery中向上滚动时再次设置动画到原始位置。动画只发生一次,我希望它一直发生,但动画只做一次

$(document).ready(function(){
  $(window).scroll(function() {
    if ($(document).scrollTop() > 200) {
      $('.back').addClass('HomeButtonFloat');
	  
	    $('.back').animate({bottom:'0px'}, 800);
		
    } 
	
	else  {
	    $('.back').removeClass('HomeButtonFloat');
      
        
	    
    }
  });
});
.back{
    background-image: url('http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/466581761641871614/files/AppWidgets/Widgets/Initial2.1.jpg');
    background-size: 150px 150px;
    background-repeat:no-repeat;
	background-position:center center;
   width:180px;
   height:180px;
   border-radius:15px;
   border:solid black 5px;
   margin-bottom:10px;
   margin-top:30px;
   box-shadow: 0px 0px 50px 5px red;
  
  
}


.HomeButtonFloat {
    background-image: url('http://www.weebly.com/editor/uploads/1/1/3/4/11341626/custom_themes/466581761641871614/files/AppWidgets/Widgets/Initial2.1.jpg');
    background-size: 50px 50px;
    background-repeat:no-repeat;
	width:50px;
	height:50px;
    position:fixed;

	left:10px;
	
	
   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body style="height:1550px;">
<div class="back"> 
 <a href="Chicago.html">
</a>
</div> 



</body>

0 个答案:

没有答案