Question

我将创建一个黑白背景网站。当背景为黑色时，我希望标题被translateY替换。我想在过渡区域缓慢改变。我怎么能这样做？

＆＃13;

function headerEffect() {
  var win = $(window).scrollTop();
  var blackspace = $('.black').offset().top;
  var headw = $('.logo-white');
  var headb = $('.logo-black');
  var where = window.pageYOffset || document.documentElement.scrollTop;

  if (win > blackspace) {
    headw.css({
      'transform': 'translateY(' + (win - blackspace - 42) + 'px' + ')'
    });
  }
}

headerEffect();
$(window).scroll(headerEffect);

＆＃13;

header {
  position: fixed;
  font-size: 30px;
  font-weight: bold;
}

header .logo-white {
  color: #fff;
}

header .logo-black {
  color: #000;
}

.black {
  background: #000;
  height: 300px;
  width: 100%;
}

.white {
  background: #fff;
  height: 300px;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header>
  <div class="logo-black">LOGO</div>
  <div class="logo-white">LOGO</div>
</header>

<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>

＆＃13;

https://jsfiddle.net/br1fmhou/

Answer 1

我写0以确保您在console.log('123') div

中滚动

black

https://jsfiddle.net/br1fmhou/2/

滚动时如何更改div上的标题？

1 个答案: