Javascript-在window.pageYOffset已为0时检测滚动尝试

我在页面加载上有一个div，它被向下推出视图，然后在以后暴露出来，并被推到

顶栏

，通过更改我的函数中的顶部样式来接管屏幕的其余部分，如下所示：

$('#drawer').animate({
      top: 92
    }, 500);

我想知道div何时可见，以检测用户是否正在向上滚动，以及当它试图向上滚动时，div是否会按用户正在向上滚动的像素量向下滑动。我不知道该怎么做

在我的脚本

scroll event.js

中，我尝试设置一个函数，在该函数中，我将在document ready上首先声明全局变量

drawerIsUp=false，检查它是否为false或true，然后执行滚动部分。但是，既然
抽屉
打开了
窗口。pageYOffset
是
0
，如果用户试图滚动，但
窗口。pageYOffset
已经是
0
，我怎么能继续向div
顶部
样式添加像素呢

    $(document).ready(function (){
    drawerDiv = this.getElementById("drawer");
    topBar = this.getElementById("top-bar");
    drawerIsUp = false;


    scrollDrawer = function () {
      if (drawerIsUp) {
  console.log('entered');
        function winScroll() {
           drawerDiv.style.top = window.pageYOffset + "px";
        }
          winScroll();
          $(window).bind({scroll: winScroll});
      }
    }

});

这是html：

         <div id="app">
            <div id="bg">
            </div>

              @section('topBar')
                @include('customer.layouts.partials.top-bar')
              @show
            <div id="main-section">
              @section('header')
                @include('customer.layouts.partials.header')
              @show

              @section('carousel')
                @include('customer.layouts.partials.carousel', ['function' => 'drawer', 'carouselPadding' => ''])
              @show
            </div>

            <div id="drawer">
              <div id="magazine-detail">
              </div>
              <div id="magazine-detail-carousel">
                @section('magazine-detail-carousel')
                  @include('customer.layouts.partials.carousel', ['function' => 'magazineDetail', 'carouselPadding' => 'carouselPadding'])
                @show
              </div>
            </div>

          </div>

您在
winResize
函数中使用了
drawer
。但是
drawer
是在
$（文档）中声明的。就绪
因此
winResize
无法识别您所说的
drawer
是什么意思

$(document).ready(function (){
    drawer = this.getElementById("drawer");
    topBar = this.getElementById("top-bar");
    drawerIsUp = false;

    function winResize() {
       drawer.style.top = topBar.offsetHeight + "px";
    }

    winResize();
    $(window).bind({resize: winResize, scroll: winScroll});
});

了解有关变量作用域的更多信息

您在
winResize
函数中使用了
drawer
。但是
drawer
是在
$（文档）中声明的。就绪
因此
winResize
无法识别您所说的
drawer
是什么意思

$(document).ready(function (){
    drawer = this.getElementById("drawer");
    topBar = this.getElementById("top-bar");
    drawerIsUp = false;

    function winResize() {
       drawer.style.top = topBar.offsetHeight + "px";
    }

    winResize();
    $(window).bind({resize: winResize, scroll: winScroll});
});

了解有关变量作用域的更多信息

我已按照您的建议更改了代码，但仍然出现错误。我已经用新的代码更新了我的问题。它现在可以工作了，函数和变量的名称相同，这就是错误所在。但在scroll事件上不会发生任何事情。Div没有下降。我已经按照您的建议更改了代码，但仍然出现错误。我已经用新的代码更新了我的问题。它现在可以工作了，函数和变量的名称相同，这就是错误所在。但在scroll事件上不会发生任何事情。Div没有向下滑动。