修复了 div 滚动并使用 CSS 和 sticky.js 更改状态

Question

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

我已经尝试对粘性脚本实施一些 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

你可以使用这个simple example。或者这个代码：

<script>
  var prevScrollpos = window.pageYOffset;
  window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
      $('.header').css({top: '0px'});
    } else {
      $('.header').css({top: '-50px'});
    }
    prevScrollpos = currentScrollPos;
  }
</script>

Answer 2

试试这个

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

$(window).scroll(function() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
})

.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

将css应用到粘性class以达到效果

Answer 3

你看到简介了吗documentation on GitHub？

根据有关活动的部分，您需要执行以下操作：

$('.header').on('sticky-start', function() { // your code });

Answer 4

关于@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>

修复了 div 滚动并使用 CSS 和 sticky.js 更改状态

Fixed div on scroll and change state using CSS and sticky.js

javascript

css

fixed