javascript - Sticky Edge - 获取轮播内单元格的边缘

Question

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

^ 以便 .item 移动到左侧位置。您将使用什么技术来检测边缘以动态定位 .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

我调整了一些代码 - 我没有检查标签是否在视口(viewport)中，而是检查了标签是否从左侧移出视口(viewport)。

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

除此之外，我还在 compensatePadding() 函数中添加了一些条件和偏移值。

请引用此fiddle .