如何根据位置更改粘性向上箭头按钮的属性？

Question

我的网页有一个粘性向上箭头图像，如下所示：

HTML：

<a href = "#navbar-scroll"><img src = "images/sticky-btn-light.png" id = "myBtn" alt = "sticky-up-button"></a>

还有 CSS：

#myBtn {
    visibility: hidden;
    position: fixed;
    bottom: 50px; 
    right: 30px; 
    z-index: 99; 
    cursor: pointer;
    padding: 15px; 
    border-radius: 10px;
    width: 5%;
    opacity: 0.5 ;
}

根据这个JS代码，当用户向下滚动时按钮消失，当用户向上滚动时出现。

window.onscroll = function(e) {
    console.log(this.oldScroll > this.scrollY);
    if((this.scrollY == 0) || (this.oldScroll < this.scrollY)  ){
        document.getElementById('myBtn').style.visibility = 'hidden';
    }
    else if(this.oldScroll > this.scrollY){
        document.getElementById('myBtn').style.visibility = 'visible';
    }
    this.oldScroll = this.scrollY;
}

现在，我想根据按钮在屏幕上的变化位置来更改按钮的颜色。当我滚动页面时，粘性按钮将位于不同的部分，如下所示。 如果粘性按钮在 A 部分，它应该是红色的。如果它在 B 部分，它应该是蓝色的。 请注意，移动的是页面，而不是按钮。按钮处于固定位置。

为此，我需要粘性按钮在任何给定时刻重叠的部分的 ID。有什么方法可以通过 JavaScript 获取这些信息？

PS：我已经调整了细节以使事情更加清晰。这是正在移动的页面。那么，如果我将Element.getBoundingClientRect() 用于#myBtn，无论我在页面上滚动到哪里，我都不会得到相同的顶部/y 值吗？

Answer 1

您可以使用element.getBoundingClientRect() 获取元素左上角的x,y 和右下角的x,y。

var arrow     = document.getElementById('myBtn');
var arrowRect = arrow.getBoundingClientRect();
console.log(arrowRect.top, arrowRect.right, arrowRect.bottom, arrowRect.left);

var section     = document.getElementById('section1');
var sectionRect = section.getBoundingClientRect();
console.log(sectionRect.top, sectionRect.right, sectionRect.bottom, sectionRect.left);

然后您可以检查与箭头和截面的碰撞。在您的情况下，x 轴无关紧要：

// This checks if the arrow is touching the section
( arrowRect.bottom > sectionRect.top && arrowRect.top < sectionRect.bottom  )

// This checks if the arrow isn't touching the section, then inverts it (faster)
!( arrowRect.bottom < sectionRect.top || arrowRect.top > sectionRect.bottom )

Answer 2

这里，我做了一个例子供你测试和实现。

这也有助于理解getBoundingClientRect，即使位置固定

var arrow= document.getElementById('myBtn');
window.onscroll = function(e) {
    var arrowBound = arrow.getBoundingClientRect();
    var divs = document.querySelectorAll(".container > div");
    divs.forEach(function(item){
      var divBound = item.getBoundingClientRect();
      var color= item.getAttribute("arrowColor");
      if ( arrowBound.bottom > divBound.top && arrowBound.top < divBound.bottom  )
      {
        arrow.style.borderTopColor  = color
      }
    })
}

#myBtn {
    position: fixed;
    top: 10px; 
    left:270px;
    z-index: 99; 
    cursor: pointer;
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}

.container{
width:300px;
height:800px;
  z-index: 81;
}

.container > div {
width:300px;
height:100px;
border:1px solid black;
}

<div class="container">
<a  id = "myBtn" href = "#navbar-scroll"></a>

<div arrowColor="red"> box red </div>

<div arrowColor="blue"> box blue </div>


<div arrowColor="green"> box green </div>
</div>

Answer 3

你可以通过getBoundingClientRect()方法得到一个html元素的坐标，调用这个函数你会得到元素的Y坐标（像素），然后你可以使用if条件

function getCoords(elem) {
  let box = elem.getBoundingClientRect();
  let body = document.body;
  let docEl = document.documentElement;
  let scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
  let clientTop = docEl.clientTop || body.clientTop || 0;
  return Math.round(box.top +  scrollTop - clientTop);
}

if(getCoords(elem) > 100){
    elem.className = 'your_class_name'
}

.your_class_name{
            color: red;
        }