使內聯Div動畫固定底部右

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>

編輯：此代碼似乎並沒有給計算器段查看器中正常工作，但它工作得很好在本地主機上。

Answer 1

我只是.inline

添加bottom:100%;right:100%您不能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'); 
}