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＆gt; $ 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＆gt; $ footerpos（即固定元素与页脚重叠）。

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

这有效，但是由于固定元素与页脚重叠，因此存在“轻弹”效果。这是由于功能执行非常迅速。闪烁的解决方案是使用这个简单的“限制”插件，在每次执行函数时添加一个短暂的延迟（您选择） - http://benalman.com/projects/jquery-throttle-debounce-plugin/

然后你只需要将on scroll函数绑定到节流：

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

});

这250ms的延迟会使功能停止执行，导致闪烁效应发生。

希望这有助于其他人试图解决这个问题。

滚动超过值后停止元素被修复

1 个答案: