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');
    };

上面我试图找到视口的高度并设置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语句连接到此或执行：

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

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

3 个答案: