Yapışkan Kenar - bir hücrenin kenarını almak, bir atlıkarınca içinde

Question

Özel bir atlıkarınca olan bir uygulama üzerinde çalışıyorum ve bir öğenin iç içeriğini sezgisel olarak hareket ettirmek için istenen bir öğe bulunana kadar her zaman görünmesini sağlayın. gerçekten kapsam dışı. .item sol konumda hareket ettirildiği gibi

^. .unit dolgu-sol değerini dinamik olarak konumlandırmak için kenarı tespit etmek için hangi teknikleri kullanırsınız? Böylece, öğe hücrenin konumunun dışına çıkmaya başlamasına rağmen, bu hücrenin içindeki metin her zaman görüntülenebilir.

// Son Fiddle sizin belirli soruyu cevaplamak için, sana requestAnimationFrame kullanarak daha iyi olacağını düşünüyorum bu beni biraz üzüyor için jquery kullanarak ... ama 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

Kuralların biraz tweaked - yerine etiket görüntü kapısında olup olmadığını kontrol etmeyi Etiketin taşınıp taşınmadığını kontrol ettim Soldan görünüm.

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

Bunun yanı sıra birkaç koşulları ekledik ve compensatePadding() fonksiyonunda değerleri ofset.

Lütfen bu fiddle'a bakın.

Answer 2

, yapabilirsin (noktasını açıklamak için ben özellikle ayrı vars olarak iki toplam değerler bıraktım) böyle bir şey kullanın:

$(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); 
});