Sticky Edge - получение края ячейки, внутри карусели

Question

Я работаю над приложением, которое имеет пользовательскую карусель, и есть желание интуитивно перемещать внутреннее содержимое элемента, чтобы он всегда находился в поле зрения, пока элемент не будет действительно вне сферы действия.

^так как элемент перемещен в левом положении. Какие методы вы бы использовали для обнаружения края для динамического позиционирования значения .unit padding-left? Таким образом, текст внутри этой ячейки всегда доступен для просмотра, даже если элемент начинает перемещаться из положения.

// Последние Fiddle https://jsfiddle.net/atg5m6ym/3124/

$(document).ready(function() { 
    //console.log("ready!"); 

function isElementInViewport (el) { 

    //special bonus for those using jQuery 
    if (typeof jQuery === "function" && el instanceof jQuery) { 
     el = el[0]; 
    } 

    var rect = el.getBoundingClientRect(); 

    return (
     rect.top >= 0 && 
     rect.left >= 0 && 
     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ 
     rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ 
    ); 
} 


    var currentPadding = 0; 
    var newPadd = 0; 

    function compensatePadding() { 
    var itemLeft = Math.abs(parseInt($('.caroseul').offset().left)); 
    console.log("itemLeft", itemLeft) 
    newPadd = Math.abs(itemLeft); 

    $('.stick .unit').css("padding-left", newPadd + "px"); 
    } 


    var unitWidth = $('.unit').width(); 
    console.log("unitWidth", unitWidth); 



    function onVisibilityChange(el, callback) { 
    var old_visible; 
    return function() { 
     var visible = isElementInViewport(el); 
     if (visible != old_visible) { 
     old_visible = visible; 
     if (typeof callback == 'function') { 
      callback(); 
     } 
     } 
    } 
    } 

    function checkVisible() { 
    console.log("checkvisible"); 

    var labelGroups = $('.caroseul .item .wraps'); 
    var length = labelGroups.length; 

    for (i = 0; i < length; i++) { 

     var isItemLabelInView = isElementInViewport(labelGroups[i]); 

     if(!isItemLabelInView){ 
     $(labelGroups[i]).closest(".item").addClass("stick"); 
     } 
     else{ 
     $(labelGroups[i]).closest(".item").removeClass("stick"); 

     //reset moved items 
     $('.unit').css("padding-left", 0); 
     } 

     console.log(" labelGroups[i]", labelGroups[i]); 
     console.log("isItemLabelInView", isItemLabelInView); 
    } 

    compensatePadding(); 
    } 



    $('.container').on('scroll', checkVisible); 

}); 

Answer 1

Я подправил немного коды - вместо того, чтобы проверить, если метка в окне просмотра или нет Я проверил, выходит ли ярлык видового экрана слева.

if ($(labelGroups[i]).offset().left < 0) { 
    $(labelGroups[i]).closest(".item").addClass("stick"); 
} else { 
    $(labelGroups[i]).closest(".item").removeClass("stick"); 

Кроме того, я добавил несколько условий и значения смещения в compensatePadding() функции.

См. Это fiddle.

Answer 2

Использование JQuery для этого мне больно немного, как я думаю, вы бы лучше использовать requestAnimationFrame ... но, чтобы ответить на ваш конкретный вопрос, вы могли бы использовать что-то вроде этого (я специально оставил два агрегатных значения в виде отдельного Варса для того, чтобы объяснить точку):

$(document).ready(function() { 
    function animateMe(){ 
    $(".item").animate({ 
     left: "-=5" 
    }, 1000, function() { 
     amountMovedLeft += 5; 
     if(amountMovedLeft >= amountUntilUnitHitsLeft){ 
     $(".unit").animate({ 
      right: "+=5" 
     } 
     } 
    }); 
    } 

    var amountMovedLeft = 0; 
    var unitWidthHalf = $('.unit').width()/2; 
    var itemWidthHalf = $('.item').width()/2; 
    var amountUntilUnitHitsLeft = itemWidthHalf - unitWidthHalf; 
    setInterval(function(){ 
    animateMe(); 
    }, 1000); 
});