javascript - 仅当高于特定 div 时才调用函数

Question

我有一个 div，一旦它滚出 View ，它就会“固定”到窗口底部。当用户查看页面的上半部分时，我只需要这种行为。当用户位于页面底部时，我不希望将 fixed 状态应用到 div。

简而言之 - 我遇到的问题是，当 div 不在 View 中时，无论页面位置如何，都会应用 fixed 状态。

演示 https://jsfiddle.net/DTcHh/19352/

$(window).scroll(function() {
  if (isScrolledIntoView($('#myDivWrapper'))) {
    if (!initSet) {
      initSet = true;
    }
    $("#myDiv").removeClass('fixed');
  } else if (initSet) {
    $("#myDiv").addClass('fixed');
  }
});

function isScrolledIntoView(elem) {
  var $elem = $(elem);
  var $window = $(window);

  var docViewTop = $window.scrollTop();
  var docViewBottom = docViewTop + $window.height();

  var elemTop = $elem.offset().top;
  var elemBottom = elemTop + $elem.height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

Answer 1

此方法涉及编辑标记和 isScrolledIntoView 函数。

将标记的上半部分(或您想要调用的任何可视区域)包裹在 div 中，为其指定一个 id #top。

修改您的滚动标记，因为它当前正在检查所有元素是否在 View 中，您只需要部分检查。

演示 https://jsfiddle.net/DTcHh/19366/

$(window).scroll(function() {
    if(isScrolledIntoView($('#myDivWrapper'))) {
      if (!initSet) {
        initSet = true;
      }
      $("#myDiv").removeClass('fixed');
    } else if (initSet && isScrolledIntoView($('#top'))) {
      $("#myDiv").addClass('fixed');
    }   
});

function isScrolledIntoView(elem) {
  var $elem = $(elem);
  var $window = $(window);

  var docViewTop = $window.scrollTop();
  var docViewBottom = docViewTop + $window.height();

  var elemTop = $elem.offset().top;
  var elemBottom = elemTop + $elem.height();

  return  ((elemTop <= docViewBottom) && (elemBottom >= docViewTop)) ;
}

我建议修改 isScrolledIntoView 函数，使其接受第二个参数/ele。这样您只需调用一次。