Sticky Edge - Holen der Kante einer Zelle, in einem Karussell

Question

Ich arbeite an einer Anwendung, die ein benutzerdefiniertes Karussell hat und es ist wünschenswert, intuitiv den inneren Inhalt eines Elements zu bewegen, so dass es immer im Blick, bis das Element ist wirklich außerhalb des Geltungsbereichs.

^so wie der .item in der linken Position bewegt wird. Welche Techniken würden Sie verwenden, um die Kante zu erkennen, um den Wert .unit padding-left dynamisch zu positionieren? Der Text in dieser Zelle ist also immer sichtbar, selbst wenn der Gegenstand sich außerhalb seiner Position bewegt.

// Neueste 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

gezwickt ich ein bisschen Code - anstelle der Prüfung, ob Label im Ansichtsfenster ist oder nicht Ich habe überprüft, ob das Etikett ausläuft des Ansichtsfensters von links.

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

Außerdem habe ich ein paar Bedingungen und Offset-Werte in compensatePadding() Funktion hinzugefügt.

Bitte beziehen Sie sich auf diese fiddle.

Answer 2

mit JQuery für mich das ein bisschen Schmerzen, wie ich glaube, Sie besser dran wäre request mit ... aber, Ihre Frage zu beantworten, könnten Sie verwenden so etwas wie dieses (ich habe speziell die beiden Aggregatwerte als separate vars, um den Punkt zu erklären, links):

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