0
30.07.201712:5030.07.2017 12:50:53
Реализаций много, это всего лишь одна из них. Здесь реализован плавающий блок, который двигается относительно соседнего и верха экрана, при достижении нижней части левого блока движение прекращается, делалось для корзины. В случае если высота левого блока меньше правого – движения не будет. Также код не будет выполняться для мобильных устройств в следствии верстки в одну колонку:
[spoiler]JS
$().ready(function() {
if ($(window).width()>991){
var $scrollingDiv = $(".bascketmain");
var $scrollingDivTop = 128;
var $scrollingDivBot = $(".mybascket").height();
$(window).scroll(function(){
//alert($(".mybascket").offset().top);
$scrollingDiv.stop().animate({"marginTop": ($(window).scrollTop() < $scrollingDivTop||$(window).scrollTop() > $scrollingDivBot||$scrollingDiv.height()>$scrollingDivBot ? 0 : $scrollingDiv.height()+$(window).scrollTop()<$(".mybascket").offset().top+$scrollingDivBot ? $(window).scrollTop()-$scrollingDivTop+198+"px":$scrollingDivBot-$scrollingDiv.height()+15) }, "slow" );
});
}
});
|
HTML
<div class="mybascket col-md-8">
<?
// код для содержимого
?>
</div>
<div class="bascketmain col-md-4">
<?
// код для содержимого
?>
</div>
|
30.07.201712:5030.07.2017 12:50:53