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

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，我是否会在页面上的任何位置滚动时获得该元素的相同 top/y 值？

Answer 1

您可以使用 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;
        }

Answer 2

您可以使用 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 3

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

即使位置固定

，这也有助于理解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>

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

How to change the properties of a sticky up arrow button based on its position?

html

javascript

css

sticky

sticky-footer