在JavaScript中基于视口位置隐藏元素

Question

所以我想创建一个按钮(箭头)指向下面的一些内容。如果下面的内容不在视图中，页面加载时会弹出一个箭头，用户可以选择它，这样页面就会滚动到页面的这个点。

    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    // var d = document.document.getElementsByClassName("container");
    var topPos = h.offsetTop;
    if (topPos > 1) {
      $('go-btn_banner').addClass('banner-btn');
    };

上面我试图找到viewport的高度和设置offsetTop，所以如果用户可以看到的内容添加一个类隐藏它，如果不显示它。

有什么可以帮助我实现这个吗?

Answer 1

您可以使用$(window).height()和$(window).scrollTop来找出屏幕切断的位置，然后使用$("content query").offset().top来查看内容开始的位置，并找出它是否在窗口视图中。

还有$(window).on("scroll", function() {})作为事件处理程序;

Answer 2

看看这个https://github.com/customd/jquery-visible这是一个jQuery插件

Answer 3

您可以使用这个函数来检查一个元素是否在视图中:

$.fn.isVisible = function(x, y){
  if(x == null || typeof x == 'undefined') x = 1;
  if(y == null || typeof y == 'undefined') y = 1;
  var win = $(window);
  var viewport = {
    top : win.scrollTop(),
    left : win.scrollLeft()
  };
  viewport.right = viewport.left + win.width();
  viewport.bottom = viewport.top + win.height();
  var height = this.outerHeight();
  var width = this.outerWidth();
  if(!width || !height){
    return false;
  }
  var bounds = this.offset();
      bounds.right = bounds.left + width;
      bounds.bottom = bounds.top + height;
  var visible = (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
  if(!visible){
    return false;   
  }
  var deltas = {
    top : Math.min( 1, ( bounds.bottom - viewport.top ) / height),
    bottom : Math.min(1, ( viewport.bottom - bounds.top ) / height),
    left : Math.min(1, ( bounds.right - viewport.left ) / width),
    right : Math.min(1, ( viewport.right - bounds.left ) / width)
  };
  return (deltas.left * deltas.right) >= x && (deltas.top * deltas.bottom) >= y;
};

然后像这样使用:

if ($('go-btn_banner').isVisible(0.8, 0.8)) {
  $('go-btn_banner').addClass('banner-btn');
};

这将要求$('go-btn_banner')是80%可见的，以便if语句执行。要检查一个元素是否不在视图中，可以将else语句连接到this或执行以下命令:

if (!$('go-btn_banner').isVisible(0.8, 0.8)) {
  $('go-btn_banner').addClass('banner-btn');
};