Question

我在http://www.alessandrosantese.com/aldemair-productions/project.html

有以下内容：

$('.main-wrapper').on('scroll', function(){
    console.log('ffsdfsd');
});

但它没有开火，我需要知道主包裹器一击到标题，我就可以制作＆＃34; secondary-nav＆＃34;也固定了。

这几乎奏效了：

// $('.off-canvas-wrapper').on('scroll', function(){
//  console.log($('.off-canvas-wrapper').scrollTop());
//  if($('.off-canvas-wrapper').scrollTop() == 418 || $('.off-canvas-wrapper').scrollTop() > 417) {
//      $('.secondary-nav').addClass('fixed-nav');
//  }
//  else {
//      $('.secondary-nav').removeClass('fixed-nav');
//  }
// });

但不幸的是＆＃34; $（＆＃39; .off-canvas-wrapper＆＃39;）。scrollTop（）＆＃34;根据窗口调整大小的时间进行更改。

Answer 1

问题在于您将滚动事件附加到.main-content元素。

根据jQuery documentation，滚动事件仅适用于窗口对象，可滚动框架/元素。

当用户滚动到a时，滚动事件被发送到元素元素中的不同位置。它适用于窗口对象，但也适用具有溢出CSS属性集的可滚动框架和元素滚动

尝试将滚动事件附加到窗口对象并检查scrollTop与.main-content顶部。

$(function() {

  var $main = $(".main-wrapper"),
    top = $main.offset().top;

  function affix() {
    var scrollTop = $(window).scrollTop();

    if (top < scrollTop) {
      // apply css to fix navigation
      alert('affix navigation');
      $('.secondary-nav').addClass('fixed-nav');
    } else {
      $('.secondary-nav').removeClass('fixed-nav');
    }
  }

  $(window).scroll(affix);

});

.top-content {
  height: 500px;
}
.main-wrapper{
  height: 800px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-content">
  <p>scroll down</p>
</div>
<div class="main-wrapper">
  <p>content here</p>
</div>

Answer 2

我认为你可以通过错误的元素将事件应用到。试试这个：

$(window).on('scroll', function(){
     console.log('ffsdfsd');
});

滚动事件未触发

2 个答案: