Question

我有以下代码将.upper类应用于＃top-btn，当用户向下滚动一定量时它会显示在底部，当它们向上滚动时将其删除。它从页面底部激活＃top-btn。

然而，当在向上滚动时移除类时，我希望它能够向后移动。我拥有它的方式只是眨眼（因为上层刚被删除）。

＆＃13;

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');
	});
  });

＆＃13;

    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);
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="top-btn">Button</button>

＆＃13;

Answer 1

您可以在条件运算符中调用函数来删除类并向下滚动页面。像这样的东西：

    ( $(this).scrollTop() > offset ) ? $animation.addClass('upper') :
    scrollDown();

    function scrollDown(){
       $('#top-btn').removeClass('upper');
       //here goes the code to scroll down//;
    }

Answer 2

您应该添加一个.upper的{{1}}课，而不是删除.lower。如果你不知道按钮的高度，那么你可以从jquery设置它。

然后你的jquery会变成这样：

bottom:-30px;

＆＃13;

( $(this).scrollTop() > offset ) ? 
$animation.addClass('upper').removeClass("lower"):
$animation.addClass('lower').removeClass("upper");

＆＃13;

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");
    });
});

＆＃13;

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);
}

＆＃13;

从div中删除类时应用动画

2 个答案: