jQuery - $（window）.scroll（function（）无效

Question

我有一个功能，如果它在顶部，我想向下移动向下滚动。但是在函数值仍然为0之前和之后都没有任何反应。 这是代码：

scrollDrawer = function () {
      if (drawerIsUp) {
        console.log($(window).scrollTop());


        $(window).scroll(function() {
            if ( $(window).scrollTop() < 92 ) {
                $('html, body').animate({
                    scrollTop: $(".middle").offset().top
                }, 2000);
            }
        });
    console.log($(window).scrollTop());

    function winScroll() {
       drawerDiv.style.top = (drawerDiv.offset + window.pageYOffset) + "px";
    }

  }
}

更新

console.log($(window).scrollTop());

        $(window).scroll(function() {
            if ( $("html,body").scrollTop() < 92 && $("html,body").scrollTop() > 0) {
                $("html,body").scrollTop(800)
            }
        });

        console.log($(window).scrollTop());

我已经更新了代码并通过应用答案中的建议对其进行了修改，但滚动仍未重新定位。我想知道是否可能是因为当页面打开时它已经位于前0位，我需要立即重新定位它而不首先从用户滚动。

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>

CSS：

#main-section {
  height: calc(100vh - 92px);
  overflow-y: scroll;
  width: 100%;
  position: fixed;
  overflow-y: scroll;
  top:77px;
}

#drawer {
  z-index: 5;
  position: fixed;
  top: 100vh;
  height: calc(100vh - 92px);
  max-height: 100%;
  overflow-y: scroll;
  width: 100%;
  background-color: $white;
  padding-left: 15px;
  padding-right: 15px;
}

.top-bar {
  position: fixed;
  top: 0;
}

点击div drawer，因为它低于vh，所以首先看不到{div} main-section，一直到top-bar的顶部，一直到$('#drawer').animate({ top: 92 }, 500); 开始的位置。这是动画：

registerComponent(HelloWorldApp);

然后在那个动画之后我希望滚动从底部开始，这样我就可以在用户开始滚动时将抽屉再次向下移动一个用户向上滚动的像素数量。

Answer 1

http://jsfiddle.net/KHeZY/39/  

$（window）.scroll（）并不总是需要在800处停止，此事件仅在您停止滚动$（窗口）后触发.scrollTop（

$(window).scroll(function(){console.log($(window).scrollTop());
    if($(window).scrollTop() > 800 && $(window).scrollTop() < 850)
    {
        alert('mission accomplished');
    }
});

Answer 2

试试这个

$(window).scroll(function() {
    if ( $(window).scrollTop() < 92 ) {
        // if want to animate scroll
        $('html, body').animate({
            scrollTop: $("body, html").offset(800)
        }, 2000);
        // otherwise
        $("body, html").offset(800)
    }
});

Answer 3

我认为你犯了一个错误，你应该将addEventListener添加到窗口，当页面init，窗口 scrollTop（） eval 0 ，因此您的第二个示例无法正常工作。最后，当浏览器进入页面时，所有 console.log 都已执行，所以你可以通过console.log看到两个相同的结果，你可以尝试进入滚动功能，这样你可以在鼠标滚动时看到窗口的scrollTop。 有一些例子：

console.log($(window).scrollTop());

    $(window).scroll(function() {
        if ( $(window).scrollTop() < 92 && $(window).scrollTop() > -1) {
            $(window).scrollTop(800);
        }
    console.log($(window).scrollTop());
    });

另一个：

scrollDrawer = function () {
    if (1) {
        console.log($(window).scrollTop());
        $(window).scroll(function() {
            if ( $(window).scrollTop() < 92 ) {
                $(window).scrollTop(800);
            }
        });
        console.log($(window).scrollTop());
    }
}
scrollDrawer();

Answer 4

这可能不是你想要的，但它可以用一点css。

var wrap = $("#wrap");

wrap.on("scroll", function(e) {

  if (this.scrollTop > 800) {
    wrap.addClass("new");
  } else {
    wrap.removeClass("new");
  }

});