如何在使用javascript向下滚动时将元素置于悬停状态

我试图制作一个div元素，当向下滚动时，它的属性将发生巨大的变化。我希望它如何工作的示例

我希望它不是悬停，这样当向下滚动时，页面范围的div将变成一个小圆圈div，单击它将作为返回顶部的按钮。如果添加了更多的类或类似的东西，这并不重要。我对js非常陌生，我尝试了一些东西，也在谷歌上搜索过。我从w3school的《如何制作返回顶部按钮指南》中获得了滚动代码，该指南规定，当向下滚动20px时，代码会做出反应，但我不知道如何在向下滚动时将JavaScript转换为js，同时转换div

---

提前感谢

我认为您希望实现滚动到顶部的功能，这在大多数web应用程序中非常常见

您需要保持下面的内容并设计该功能

有一个标题，应该有一个带有哈希的引用ID，以便回滚到顶部

创建一个按钮，该按钮将始终保持静态位置（JS）按钮，当用户滚动窗口时将显示该按钮

返回顶部的按钮上的绑定单击事件

下面是您可以看到并使用它的实现

.html

JS:

---

首先感谢您的回复，但我不需要，我想我没有解释清楚，但基本上，只要页面向下滚动，div就会进入悬停状态，就像我在代码笔中显示的那样。因此，当页面滚动小于20px时，它将是一个大div，由div的未覆盖状态表示，当滚动时，它应该是悬停状态，就像在代码笔中一样，我找不到一种方法来使用JS将元素转换为悬停状态，所以问这个问题。

<h1 class="intro-copy">  
Scroll down to use this simple back-to-top button made with modern vanilla javascript.
</h1>

<a class="top-link hide" href="" id="js-top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Back to top</span>
</a>

body {
  height: 2000px;
  position: relative;
}

.intro-copy {
  padding: 1em;
  margin: 50vh auto;
  max-width: 15em;
  font-family: Helvetica;
  font-weight: lighter;
  font-size: 2em;
  line-height: 1.2;
  text-align: center;
}

.top-link {
  transition: all .25s ease-in-out;
  position: fixed;
  bottom: 0;
  right: 0;
  display: inline-flex;
  
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin: 0 3em 3em 0;
    border-radius: 50%;
    padding: .25em;
    width: 80px;
    height: 80px;
  background-color: #F8F8F8;
  
  &.show {
    visibility: visible;
    opacity: 1;
  }
  
  &.hide {
    visibility: hidden;
    opacity: 0;
  }

    svg {
        fill: #000;
        width: 24px;
        height: 12px;
    }

    &:hover {
        background-color: #E8E8E8;

        svg {
            fill: #000000;
        }
    }
}

// Text meant only for screen readers.
.screen-reader-text {
    position: absolute;
    clip-path: inset(50%);
    margin: -1px;
    border: 0;
    padding: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    word-wrap: normal !important;
    clip: rect(1px, 1px, 1px, 1px);

    &:focus {
        display: block;
        top: 5px;
        left: 5px;
        z-index: 100000; // Above WP toolbar
        clip-path: none;
        background-color: #eee;
        padding: 15px 23px 14px;
        width: auto;
        height: auto;
        text-decoration: none;
        line-height: normal;
        color: #444;
        font-size: 1em;
        clip: auto !important;
    }
}

// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');

// Let's set up a function that shows our scroll-to-top button if we scroll beyond the height of the initial window.
const scrollFunc = () => {
  // Get the current scroll value
  let y = window.scrollY;
  
  // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
  if (y > 0) {
    scrollToTopButton.className = "top-link show";
  } else {
    scrollToTopButton.className = "top-link hide";
  }
};

window.addEventListener("scroll", scrollFunc);

const scrollToTop = () => {
  // Let's set a variable for the number of pixels we are from the top of the document.
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // If that number is greater than 0, we'll scroll back to 0, or the top of the document.
  // We'll also animate that scroll with requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo takes an x and a y coordinate.
    // Increase the '10' value to get a smoother/slower scroll!
    window.scrollTo(0, c - c / 10);
  }
};

// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  scrollToTop();
}