Question

我有一个已经修复的div＆＃39;一旦它滚出视图，就到窗口的底部。当用户查看页面的上半部分时，我只想要这种行为。当用户位于页面底部时，我不希望将fixed状态应用于div。

简而言之 - 我遇到的问题是，当div不在视图范围内时，无论页面位置如何，都会应用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中将标记的上半部分（或您要调用的任何可查看区域）包裹为#top。

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

演示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。这样你只需要调用一次。

Answer 2

只有当你在页面的下半部分时才会执行这个if块

  if($(window).scrollTop() + $(window).height()/2 > $(document).height() / 2)

更新小提琴 - https://jsfiddle.net/DTcHh/19370/

仅在特定div之上调用函数

2 个答案: