Question

我让所有代码都工作，除了让它动画。我想在页面上内嵌一个div容器，一旦div在滚动页面的顶部，我希望该div停留在页面的右下角。

我已完成上述所有工作，但我无法获得的部分是使该过渡变为动画，因此它不是从内联到右下角的快速转换。

到目前为止，这是我的工作代码。我无法工作的部分是使用.animate函数，因为我正在交换类。

var $window 		= $( window );
var $container 		= $( '#container' );
var containerTop 	= $container.offset().top;

$window.scroll( function() {
	if( $window.scrollTop() > containerTop ) {
		pullContainer();
	} else {
		revertContainer();
	}
});

function pullContainer ( ) {
	$container.removeClass( 'inline' ).addClass( 'fixed' );
}

function revertContainer ( ) {
	$container.removeClass( 'fixed' ).addClass( 'inline' );
}

#header {
	background: #666;
	height: 75vh;
}

#content{
	background: #eee;
	height: 75vh;
}

#footer {
	background: #ccc;
	height: 75vh;
}

#container{
	background: red;
	width: 50%;
}
.fixed {
	position: fixed;
	bottom: 0;
	right: 0;
}

.inline {
	position: static;
}

	<div id="header"></div>
	<div id="content">
		<div id="container">
			<img src="http://lorempixel.com/400/400" />
		</div>
	</div>
	<div id="footer"></div>

编辑：此代码似乎在stackoverflow代码段查看器中无法正常工作，但它在localhost上运行正常。

Answer 1

我刚刚在bottom:100%;right:100%

上添加了.inline

您无法转换position。

https://jsfiddle.net/k27rkxfe/

的CSS：

#header {
    background: #666;
    height: 75vh;
}

#content{
    background: #eee;
    height: 75vh;
}

#footer {
    background: #ccc;
    height: 75vh;
}

#container{
    background: red;
    width: 50%;
  transition:all 0.3s;
}
.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
}

.inline {
    position: inline;
  bottom:100%;
  right:100%;

}

的javascript：

var $window         = $( window );
var $container      = $( '#container' );
var containerTop    = $container.offset().top;

$window.scroll( function() {
console.log($window.scrollTop(), containerTop)
    if( $window.scrollTop() > containerTop ) {
        pullContainer();
    } else {
        revertContainer();
    }
});

function pullContainer ( ) {
    if ($container.hasClass('fixed'))return;
    $container.toggleClass('fixed inline');
}

function revertContainer ( ) {
    if ($container.hasClass('inline'))return;
    $container.toggleClass('fixed inline');
}

使内联Div动画固定为右下角

1 个答案: