How to make an element disappear after scrolling?-CodePudding

I have a custom icon element that is only displayed when its specific row in the table is hovered over, but when I scroll down without moving my mouse it doesn't update the hover and maintains the button on the screen and over my table's header. How can I make sure this doesn't happen?

export const StyleTr = styled.tr`
  z-index: ${({ theme }) => theme.zIndex.userMenu};
  &:hover {
    background-color: ${({ theme, isData }) =>
      isData ? theme.colors.primary.lighter : theme.colors.white};
    div {
      visibility: visible;
    }
    svg[icon] {
      display: initial;
    }
  }
`;

CodePudding user response：

Have you tried getting the scroll position of the DOM, then disabling (removing) the element once a certain scroll position is reached?

CodePudding user response：

I was just working on something similar to this for a web scraper recently.

Something like this should work:

function checkIfIconInViewport() {
// define current viewport (maximum browser compatability use both calls)
const viewportHeight = 
window.innerHeight || document.documentElement.clientHeight;

//Get our Icon
let icon = document.getElementById('icon');
let iPos = icon.getBoundingClientRect();

//Show if any part of icon is visible:
if (viewportHeight - iPos.top > 0 && iPos.bottom > 0) {
  icon.style.visibility = visibile;
}
else { icon.style.visibility = hidden; }


//Show only if all of icon is visible:
if (iPos.bottom > 0 && iPos.top >= 0) {
{
  icon.style.visibility = visibile;
}
else { icon.style.visibility = hidden; }

//Add && iPos.bottom <= viewportHeight to the if check above for very large elements.
{

//Run function everytime that the window is scrolled.
document.addEventListener('scroll', checkIfIconInViewport);

Basically, every time a scroll event happens, we just check to see if the top & bottom of our element (the icon in your case) are within the bounds of the viewport.

Negative values, or values greater than the viewport's height mean that the respective portion of the element is outside the viewport's boundary.

Hopefully this helps! If you are dealing with a large quantity of objects, it may make sense to bundle the objects you are tracking together into an array and check each of them in a single function call to avoid saving function definitions for each individual object.

Edit: I just realized that I misunderstood your issue a bit. I think you can get by with just the bottom part of the code, and when a scroll event happens, set the icon's visibility to hidden. Assuming you want to hide it whenever the user scrolls?