javascript - 我想为每个滚动CSS更改文本

Question

我正在尝试更改HTML和CSS个人工作中的文本。
我想更改“ a”中的文字。当我向下滚动页面时，选择“ alessi”。当我向上滚动时。

这是我的实际代码，但它只更改一次文本：

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      $("#header__logo").text("alessi.");
    } else {
      $("#header__logo").text("a.");
    }
  });
});

Answer 1

演示的css仅更新以平滑滚动

$(document).ready(function() {

  for (var i = 0; i < 100; i++) $('body').append('<br />');
  $('body').append('<div>');

  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      $("#header__logo").text("alessi.");
    } else {
      $("#header__logo").text("a.");
    }
  });


  //   smooth scroll to div
  $(".smooth-scroll").on("click", function() {
    $("html,body").animate({
      scrollTop: $($(this).attr('href')).offset().top
    }, {
      queue: false,
      duration: 1200,
      easing: "easeInOutExpo"
    });
    return false;
  });



  $(window).scroll(); // trigger it on load
});

body {
  height: 800px;
}

#header__logo {
  position: fixed;
  width: 100px;
  left: 50%;
  padding: 15px;
  border: 2px solid black;
}

.fixed {
  position: fixed;
  padding: 15px;
  bottom: 0;
  right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="header__logo"></div>



<div class="fixed">
  <a class="smooth-scroll" href="#top">top</a>
  <a class="smooth-scroll" href="#middle">middle</a>
  <a class="smooth-scroll" href="#bottom">bottom</a>
</div>


<h1 id="top">top</h1>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<h1 id="middle">middle</h1>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<h1 id="bottom">bottom</h1>