Inline Div Animate'i Sabit Alt Sağa Getir

Question

Tüm kodları canlandırmaya alıştırma dışında çalışıyorum. Bir div kapsayıcının sayfada satır içi olmasını ve sayfanın üst kısmına kaydırma yaptıktan sonra sayfanın sağ alt köşesine yapışmasını istiyorum.

Yukarıdaki çalışmaların hepsine sahibim, ama elde edemediğim bölüm bu geçişi canlandırmaktır, bu yüzden satır içi sağdan aşağıya doğru hızlı bir geçiş değildir.

İşte şu ana kadar çalışma kodum. Çalışamayacağım kısım, sınıf fonksiyonlarını değiştirdiğim için .animate fonksiyonunu kullanmak.

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>

düzenleme: Bu kod stackoverflow pasajı görüntüleyicisi içinde düzgün çalışması için görünmüyor, ama localhost üzerinde gayet güzel çalışıyor.

Answer 1

Sadece Sen position üzerinde geçiş olamaz .inline

üzerinde bottom:100%;right:100% ekledi.

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