は、私はすべてのコードは、それがアニメーション化するために取得を除いて働いてきた固定右下

Question

インライン本部アニメーションを作成します。私はdivコンテナをページ上にインラインにして、そのdivがスクロールのページの先頭にヒットしたら、そのdivがページの右下に止まるようにしたい。

私は上記の作業のすべてを持っているが、私は得ることができない部分は、それが右下へインラインからクイックシフトではありませんので、その遷移アニメーションを作ることです。ここで

は、これまでのところ、私の作業コードです。私が働くことができない部分は、私がクラスを交換しているときに.animate関数を使うことです。

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

 
$window.scroll(function() { 
 
\t if($window.scrollTop() > containerTop) { 
 
\t \t pullContainer(); 
 
\t } else { 
 
\t \t revertContainer(); 
 
\t } 
 
}); 
 

 
function pullContainer () { 
 
\t $container.removeClass('inline').addClass('fixed'); 
 
} 
 

 
function revertContainer () { 
 
\t $container.removeClass('fixed').addClass('inline'); 
 
}

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

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

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

 
#container{ 
 
\t background: red; 
 
\t width: 50%; 
 
} 
 
.fixed { 
 
\t position: fixed; 
 
\t bottom: 0; 
 
\t right: 0; 
 
} 
 

 
.inline { 
 
\t position: static; 
 
}

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

編集：このコードはstackoverflowのスニペットビューア内に正しく動作するようには思えませんが、ローカルホスト上でうまく動作します。

Answer 1

私はちょうどあなたがpositionに移行することはできません.inline

にbottom:100%;right:100%を追加しました。

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