获取页面滚动时div的位置答案

【问题标题】：Get the position of div on page scroll获取页面滚动时div的位置
【发布时间】：2016-04-13 23:14:30
【问题描述】：

大家好，

我不太擅长 jQuery 和 javascript。我将制作一个脚本来占据我的 div 的位置，当它位于页面顶部时，它会做一些事情。

示例：

我有一个菜单。当我滚动页面并且我的 div 到达顶部时（或者更好的是距离顶部 100/200 像素），我的菜单中的某些内容会发生变化......

我希望有人可以帮助我。谢谢。

【问题讨论】：

一张描述您正在尝试做的事情的图片会很有帮助。还发布一些您尝试过的代码。
api.jquery.com/offset

标签： javascript jquery

【解决方案1】：

您应该使用 jQuery offset() scrollTop() 和 scroll() 方法来实现这一点。

http://api.jquery.com/offset/

https://api.jquery.com/scrollTop/

https://api.jquery.com/scroll/

Offset 返回页面顶部元素的像素值。在滚动时运行它，您可以检测到元素何时距离顶部 100 像素或 200 像素。

这是一个在 window.scroll() 上运行 offset() 和 scrollTop() 的示例，并在元素到达此页面顶部时添加/删除类。在此示例中，我将 $mainMenuBar 在用户滚动经过它时固定到页面顶部，并在用户向上滚动经过它时取消固定它。

   // declare vars
    var $window = $(window),
        $mainMenuBar = $('.anchor-tabs'),
        $mainMenuBarAnchor = $('.anchor-tabs-anchor');

    // run on every pixel scroll
    $window.scroll(function() {
        var window_top = $window.scrollTop();
        var div_top = $mainMenuBarAnchor.offset().top;
        if (window_top > div_top) {
            // Make the div sticky.
            $mainMenuBar.addClass('fixed-top');
            $mainMenuBarAnchor.height($mainMenuBar.height());
        }
        else {
            // Unstick the div
            $mainMenuBar.removeClass('fixed-top');
            $mainMenuBarAnchor.height(0);
        }
    });

希望这会有所帮助。

【讨论】：

【解决方案2】：

您可以将 div 元素的偏移量与用户滚动页面向下的距离进行比较。

$(window).scrollTop() 函数可让您了解用户向下滚动的距离，即：

$(window).scroll(function() {
  var yourDiv = $("#theIdOfYourDiv");
  var window_offset = yourDiv.offset().top - $(window).scrollTop();
  if ( window_offset < 100 )
  {
  // do what you want
  }
});

【讨论】：

非常感谢您的帮助。一个解决我的问题的简单脚本。