Question

嗨，大家好，

我对jQuery和javascript不太满意。我将创建一个脚本来取得我的div的位置，当它位于页面顶部时，它会产生一些东西。

示例：

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

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

Answer 1

您应该使用jQuery offset（）scrollTop（）和scroll（）方法来实现此目的。

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

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

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

Offset返回页面顶部元素的像素值。在滚动时运行此选项，您可以检测元素的时间是100px，还是从顶部开始的200px。

以下是在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);
        }
    });

希望这有帮助。

Answer 2

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

$（窗口）.scrollTop（）函数可以帮助您了解用户向下滚动的距离，即：

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

在页面滚动中获取div的位置

2 个答案: