javascript - 为什么当我尝试在滚动时更改它时我的旋转 css 不起作用？

Question

我试图在向下滚动页面时进行 h1 更改。我想要在左侧 Y 页中间的固定位置。为什么不固定？课程一词不在其他地方

const sections = document.querySelectorAll("div")
const clientTag = document.querySelector("h1.client")

document.addEventListener("scroll", function () {
  const pixels = window.pageYOffset
  
  sections.forEach(section => {
    if (section.offsetTop - 60 <= pixels) {
      clientTag.innerHTML = section.getAttribute("data-client")
    }
  })
})

div {
  height:100vh;
}

header {
  display:inline-block;
  position: fixed;
  transform:rotate(-90deg) translate(50%, 50%);
  -webkit-transform: translate(50%,50%) rotate(90deg);
  transform-origin: 78% 100%;
  padding:auto;
  margin:auto;
  

}

<header>
  <h1 class="client">work</h1> 
</header>

<div data-client="work"></div>

<div data-client="about"></div>

<div data-client="curriculum"></div>

<div data-client="contact"></div>

标签： javascripthtmlcss

Answer 1

transform-origin是什么让标题跳了这么多。您可以将其删除，使其采用默认值 ( center) 并始终相对于其中心旋转，该中心通过设置topandleft属性定义。

const sections = document.querySelectorAll("div")
const clientTag = document.querySelector("h1.client")

document.addEventListener("scroll", function () {
  const pixels = window.pageYOffset
  
  sections.forEach(section => {
    if (section.offsetTop - 60 <= pixels) {
      clientTag.innerHTML = section.getAttribute("data-client")
    }
  })
})

div {
  height:100vh;
}

header {
  display: block;
  position: fixed;
  transform: translate(-50%, -50%) rotate(-90deg);
  -webkit-transform: translate(-50%, -50%) rotate(-90deg);
  top: 50%;
  left: 20px;
}

<header>
  <h1 class="client">work</h1> 
</header>

<div data-client="work"></div>

<div data-client="about"></div>

<div data-client="curriculum"></div>

<div data-client="contact"></div>