代码之家 › 专栏 › 技术社区 › Jay Smoke

修正了使用css和sticky.js滚动和更改状态的DIV

fixed css javascript

Jay Smoke · 技术社区 · 6 年前

我正在使用 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格式问题,但我似乎找不到正确的语法。

4 回复 | 直到 6 年前

danielcooperxyz 6 年前

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

Alex 6 年前

你看到简报了吗 documentation on GitHub ?

根据事件部分,您需要执行以下操作:

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

Mr.Js 6 年前

你可以用这个 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>

Poulima Biswas 6 年前

试试这个

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应用于粘性类以获得效果