javascript - 使用 CSS 和 sticky.js 修复滚动和更改状态的 div

Question

我目前正在使用 sticky.js滚动时将 div 固定到屏幕顶部。这非常有效，我不想更改它，但我想将一些 css 应用于 div 以在它粘住时产生一些变化。

我已尝试对粘性脚本实现一些 JavaScript，但它仍然无法正常工作。

这是我现在拥有的:

HTML

<div class="header"><div class="small_logo"><a href="/"><img src=""></a></div></div>

JavaScript

$(document).ready(function(){ 
$(".header").sticky({
     topSpacing: 0,
     success: function() {
            $('.header').addClass("wide");
            $('.small_logo').fadeIn("slow");    
            }
    });
  });

我确定这只是一个简单的 javascript 格式问题，但我似乎找不到正确的语法。

Answer 1

关于@Alex 的观点，文档没有描述您在代码中使用的任何成功选项。

正确的方法是使用已经 described in the documentation on github 的事件

我在下面给出了一个例子。

$(document).ready(function(){ 
  $(".header").sticky({topSpacing: 0});
  $('.header').on('sticky-start', function() {
    $(".small_logo img").fadeIn("slow");
  });
  
  $('.header').on('sticky-end', function() {
    $(".small_logo img").fadeOut("slow");
  });
});

  .header {
    background: #EEE;
    height: 100px;
  }

  .small_logo img{
    height: 100px;
    display: none;
  }

  .body {
    height: 1000px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.4/jquery.sticky.min.js"></script>
<div class="header">
      <div class="small_logo">
  <!--       <a href="/"> -->
          <img src="https://i.ytimg.com/vi/YCaGYUIfdy4/maxresdefault.jpg">
  <!--       </a>       -->
    </div>
  </div>
  <div class="body"></div>