当另一个div在窗口中可见时隐藏元素

Question

当窗口中可见

或

时，我需要将类.hidden应用于我的粘性菜单。

我一直在尝试使用jquery和scrollTop();，但似乎无法实现。任何帮助都将不胜感激。

$(document).ready(function() {
    var $window = $(window);
  var tabwrap = $('.tab-wrap');
  var prefooter = $('#pre-footer');
  $window.on('scroll', function() {
    var scrollTop = $window.scrollTop();
    tabwrap.toggleClass('hidden', scrollTop > 300); /* Help! */
    /* .tabwrap should toggle class .hidden when #pre-footer and or #footer is visible in window */
  });
});

到目前为止的代码示例：https://jsfiddle.net/gavinfriel/4tcjnoxp/5/

- Gavin Friel

Answer 1

基本上，当视窗底部与#pre-footer的底部对齐时，您希望切换类。因此，当scrollTop值+视口高度大于pre-footer顶部位置+#pre-footer的高度时，就会发生这种情况。

$(document).ready(function() {
  var $window = $(window);
  var tabwrap = $('.tab-wrap');
  var prefooter = $('#pre-footer');
  var prefooter_top = prefooter.offset().top;
  var prefooter_height = prefooter.height();
  var prefooter_bottom = prefooter_top + prefooter_height;
  console.log(prefooter_bottom);
  $window.on('scroll', function() {
    var scrollTop = $window.scrollTop();
    var viewport_height = $(window).height();
    var scrollTop_bottom = scrollTop + viewport_height;
    tabwrap.toggleClass('hidden', scrollTop_bottom > prefooter_bottom); 
  });
});

- Derek Nolan

---

@mdurchholz 我刚刚再次检查了一下...我想我完全错了！这段代码与最初的代码完全相同。 - Derek Nolan

各位先生，你们好！但是有没有一种方法可以查询#pre-footer或#footer是否在视口中显示？而不仅仅是说距离顶部300像素？ - Gavin Friel

tabwrap.toggleClass('hidden'); 将在滚动时反复显示/隐藏选项卡。 - Sanchit Patiyal

@GavinFriel 当然有！获取#pre-footer的jQuery偏移或位置值。将其添加到元素的高度中，并使用结果与scrollTop进行比较。我会更新我的答案。 - Derek Nolan

你是个编程巨匠 @DerekNolan。干杯，老兄！ - Gavin Friel

Answer 2

var tabwrap   = $('.tab-wrap');
var prefooter = $('#pre-footer');

/**
 * @desc Check to see if element is inside the viewport
 */
$.fn.isInViewport = function() {
    var element     = $(this),
        elementHt   = element.outerHeight(),
        elementTop  = element.offset().top,
        elementBot  = elementTop + elementHt,

        viewportTop = $(window).scrollTop(),
        viewportBot = viewportTop + $(window).outerHeight(),

        offset      = 0.35 * elementHt; // pecentage of top and bottom

    return (elementBot - offset) > viewportTop && (elementTop + offset) < viewportBot;
};


function checkOffset()
{
    if( prefooter.isInViewport() )
        tabwrap.addClass('hidden');
    else
        tabwrap.removeClass('hidden');
}

$(window)
.load(function(){ checkOffset(); })
.scroll(function(){ checkOffset(); });

- mdurchholz