Question

我有一个贴在屏幕左侧的按钮back-to-top - 它会在点击时使用scrollTop滑动滚动到页面顶部。当页面加载时，按钮是可见的，并且不包括任何可读的内容等。

当用户向下滚动页面时，该按钮会覆盖具有文本内容的某些DIV。当按钮进入这样的DIV时，我希望它使用.hide()隐藏。无法让它发挥作用，这就是我所拥有的：

    var p = $('a.back-to-top');
    var position = p.position();

    if(position == $('#about-me')){
        $('a.back-to-top').hide();
    }

if(position == $('#about-me'))是检查按钮位置是否在#about-me DIV中的正确方法吗？或者，我应该为DIV创建类似于position的变量吗？

编辑：一个凌乱而简单的fiddle

Answer 1

http://api.jquery.com/position/ - position（）方法返回一个具有.left和.top属性的位置对象。所以基本上，你无法将位置与选择器返回的某个对象进行比较。相反，您应该比较两个元素的“顶部”属性值。例如，你有：

var p = $('a.back-to-top');
var position = p.position();

也得到这个：

var aboutMePosition = $('#about-me').position();

然后你可以比较：

aboutMePosition.top和position.top无论您需要哪种方式。

Answer 2

您需要在回调中进行此检查..可能是$(window).scroll，以便每次窗口滚动时都会检查它;否则，仅在页面加载时进行检查。

我认为您不想使用position，因为这是相对于父级的位置。相反，您可能需要.offset。这将返回具有top和left成员的对象。 ==比较没有意义，特别是对于jQuery对象。你想使用：

$(window).on('scroll', function () {
   var offset = $("a.back-to-top").offset().top;

   var within = $("#about-me").offset().top;

   if (offset >= within && offset <= within + $("#about-me").height()) {
      $("a.back-to-top").hide();
   }
   else {
      $("a.back-to-top").show();
   }
});

如果.back-to-top具有固定位置，则{{1}}的偏移量会随着滚动而改变，但静态块的偏移量不会改变，因此您可以进行此比较。

查看实际操作：http://jsfiddle.net/QnhgF/

如何隐藏在DIV上“漂浮”时贴上的按钮？

2 个答案: