粘性边缘 - 获取单元格的边缘，在旋转木马内

Question

我正在研究具有自定义旋转木马的应用程序，并且希望直观地移动项目的内部内容，使其始终处于视图中，直到项目为止真正超出了范围。

^以便将.item移到左侧位置。你会使用什么技术来检测边缘以动态定位.unit填充左值？因此，即使项目开始移出位置，该单元格内的文本也始终可见。

//最新小提琴 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); 
});