javascript - 一旦滚动超过值，停止元素被固定

Question

我有一个始终可见的固定 .widget 元素。但是目前，它会滚动到页脚区域。我的目标是在小部件到达页脚之前将其停止。

CSS

.widget {
position:fixed;
height:450px;
width:300px;
}

footer {
height:450px;
width:100%;
}

我目前正在走的路线是:

jQuery

var $bodyheight = $('body').height();
var $footerheight = $('footer').height();
var $widgetheight = $('.game_widget').height();
var $pageheight = $bodyheight - $footerheight - $widgetheight;

$(window).on('scroll', function() {
  console.log($(this).scrollTop())
});

我的下一步是循环查看是否 scrollTop > $pageheight 然后更新一些 CSS。

这是解决此问题的最佳方式吗？是否有更清洁/更简单的方法来实现相同的结果？

Answer 1

我设法很简单地解决了这个问题。在滚动函数中，我设置了 2 个变量，一个用于固定元素的位置，另一个用于页脚的位置。它们根据元素顶部距页面顶部的距离返回准确值。对于固定元素，我需要知道到该元素底部的距离，因此我还包括了高度。

var $fixedpos = $(".game_widget").offset().top + $('.game_widget').height();
var $footerpos = $("footer").offset().top - 25; // 25 accounts for margin

使用简单的 if/else CSS 更新为显示 none/initial 取决于 $fixedpos > $footerpos(即固定元素与页脚重叠)。

if ($fixedpos > $footerpos) {
    $('.game_widget').css('display','none');
} else {
    $('.game_widget').css('display','initial');
}

这是有效的，但是当固定元素与页脚重叠时会产生“闪烁”效果。这是因为函数执行得非常快。闪烁的解决方案是使用这个简单的“节流”插件，它在每次执行函数之间添加一个短暂的延迟(由您选择)- http://benalman.com/projects/jquery-throttle-debounce-plugin/

然后您只需要将滚动功能绑定(bind)到 throttle :

function scrolling() {
  console.log($(".game_widget").offset().top + $('.game_widget').height());
  console.log($("footer").offset().top - 25);

  var $fixedpos = $(".game_widget").offset().top + $('.game_widget').height();
  var $footerpos = $("footer").offset().top - 25;

  if ($fixedpos > $footerpos) {
    $('.game_widget').css('display', 'none');
  } else {
    $('.game_widget').css('display', 'initial');
  }

};

$(window).on('scroll', $.throttle(250, scrolling)); // 250ms between executing the function

});

这个 250 毫秒的延迟阻止了函数执行得太快，以至于出现了闪烁效果。

希望这能帮助其他人尝试解决这个问题。