Question

我正在开发一个具有自定义轮播的应用程序，并且可以直观地移动项目的内部内容，使其始终处于视图中，直到该项目真正超出范围。

^因此.item在左侧位置移动。您将使用哪些技术来检测边缘以动态定位.unit padding-left值？因此，即使项目开始移出位置，该单元格内的文本也始终可见。

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

粘性边缘 - 在旋转木马内获得细胞边缘

2 个答案: