Closed. This question is off-topic。它当前不接受答案。
想改善这个问题吗? Update the question,所以它是on-topic,用于堆栈溢出。
2年前关闭。
我有以下将
但是,当在向上滚动时删除该类时,我希望它向下动画。我拥有它的方式只是眨眼(因为刚刚删除了上层类)。
想改善这个问题吗? Update the question,所以它是on-topic,用于堆栈溢出。
2年前关闭。
我有以下将
.upper
类应用于#top-btn的代码,当用户向下滚动一定量时,它出现在底部;当用户向上滚动时,它将其删除。它从页面底部开始对#top-btn进行动画处理。但是,当在向上滚动时删除该类时,我希望它向下动画。我拥有它的方式只是眨眼(因为刚刚删除了上层类)。
jQuery(document).ready(function($){
// adjust this number to select when your button appears on scroll-down
var offset = 300,
scroll_top_duration = 3000,
// bind with the button link
$animation = $('#top-btn');
// apply animation
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $animation.addClass('upper') :
$animation.removeClass('upper');
});
});
body,html{
width:100%;
position:relative;
height:100%;
}
body{
background-color:green;
height:4000px;
}
#top-btn {
position: fixed;
z-index: 999;
padding: 0; margin: 0;
bottom: -100px; right: 0;
}
#top-btn.upper {
bottom: 0;
-webkit-transition: bottom 0.35s ease;
-moz-transition: bottom 0.35s ease;
-ms-transition: bottom 0.35s ease;
-o-transition: bottom 0.35s ease;
transition: bottom 0.35s ease;
}
#top-btn-BG {
display: block;
position: relative;
z-index: 950;
border-width: 0 0 100px 100px;
border-color: transparent transparent #fff transparent;
border-style: solid;
right: 0; bottom: 0;
width: 0; height: 0;
-webkit-transform:rotate(360deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="top-btn">Button</button>
最佳答案
而不是删除.upper
,您应该添加一个具有.lower
的类bottom:-30px;
。如果您不知道按钮的高度,则可以通过jquery进行设置。
然后,您的jquery将变为:
( $(this).scrollTop() > offset ) ?
$animation.addClass('upper').removeClass("lower"):
$animation.addClass('lower').removeClass("upper");
jQuery(document).ready(function($){
// adjust this number to select when your button appears on scroll-down
var offset = 300,
scroll_top_duration = 3000,
// bind with the button link
$animation = $('#top-btn');
// apply animation
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $animation.addClass('upper').removeClass("lower"):
$animation.addClass('lower').removeClass("upper");
});
});
body,html{
width:100%;
position:relative;
height:100%;
}
body{
background-color:green;
height:4000px;
}
#top-btn {
position: fixed;
z-index: 999;
padding: 0; margin: 0;
bottom: -100px; right: 0;
}
#top-btn.upper {
bottom: 0;
-webkit-transition: bottom 0.35s ease;
-moz-transition: bottom 0.35s ease;
-ms-transition: bottom 0.35s ease;
-o-transition: bottom 0.35s ease;
transition: bottom 0.35s ease;
}
#top-btn.lower {
bottom:-30px;
-webkit-transition: bottom 0.35s ease;
-moz-transition: bottom 0.35s ease;
-ms-transition: bottom 0.35s ease;
-o-transition: bottom 0.35s ease;
transition: bottom 0.35s ease;
}
#top-btn-BG {
display: block;
position: relative;
z-index: 950;
border-width: 0 0 100px 100px;
border-color: transparent transparent #fff transparent;
border-style: solid;
right: 0; bottom: 0;
width: 0; height: 0;
-webkit-transform:rotate(360deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="top-btn">Button</button>