Hide block when entering footer

Admin 1
Viewed 307

I have a block that appears after scrolling 200px on the page

const navShareLink = document.getElementById('navShareLink');
document.addEventListener('scroll', function(e) {
  if(window.scrollY > 200 && window.innerWidth > 576) {
    navShareLink.style.display = "block";
  } else {
    navShareLink.style.display = "none";
  }
});
.article-wrapper {
  min-height: 200vh;
}
.article-wrapper p:first-of-type {
  margin-top: 0;
}

footer {
  min-height: 100vh;
  background-color: #eee;
}

.sidemenu-shares {
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  flex-wrap: nowrap;
  gap: 40px;
}

.rectangle {
  z-index: 998;
  transition: opacity 0.5s;
  padding: 5px;
  height: 106px;
  width: 23px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 24px;
}
<div class="article-wrapper">

<div class="sidemenu-shares">
  <div id="navShareLink" class="rectangle">
  </div>
</div>

<div class="main-banner">
<h1>Title</h1>
</div>

<div>Main content...</div>
<div>Main content...</div>
<div>Main content...</div>
<div>Main content...</div>
<div>Main content...</div>
<div>Main content...</div>
<div>Main content...</div>
<div>Main content...</div>
<div>Main content...</div>

</div>

<footer>
  Footer...
</footer>

But when it reaches the end of the page where the footer is, I need it to hide back so that it does not climb into the footer

It's easy to do if the page has the same height, but for me it can be either 2500px or 5000px

Is it possible to somehow count the pixels in reverse order, but not from the beginning of the page, but let's say 300px from the end?

I tried to get the height of the whole page and subtract 300

I used document.documentElement.scrollHeight I thought I would just get a digital value like 4500, but in the end I get the output of this value in a pop-up window when I open the page

https://imgur.com/a/kOCjxKX

Alternatively, i can somehow hide this block when it touches the footer, is it possible to do it somehow?

css html jquery javascript
4 Answers

IntersectionObserver API (MDN)

This API allows you to observe elements on your page and invoke code based on their position relative to your current viewport.

Example:

1. The callback

const callback = (entries, observer) => {
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting <- This is what you usually look out for
    //   entry.rootBounds
    //   entry.target
    //   entry.time

    if (entry.isIntersecting) {
      document.getElementById('navShareLink').style.display = 'none';
  });
};

2. Create the observer

const options = {
  root: document.body,

  // This specifies a margin around the target (basically changes the size of the target) - can be negative
  rootMargin: '0px 0px 0px 0px',

  // This specifies how much of the target needs to be in the viewport to qualify as 'intersecting' (1 === 100%)
  threshold: 1.0
}

const observer = new IntersectionObserver(callback, options);

3. Ovserve an element

const target = document.querySelector('footer');
observer.observe(target);

One observer can observe an arbitrary number of targets. It is usually the most performant way to handle this sort of thing.

Scroll Event handlers usually trigger very often and are thus quite inefficient. If you use scroll-handlers you should at the very least debounce them.

user_116419320

I didn't quite understand what you want but just in case you want the sidebar to be sticky and when you go down to the footer it is above that block you have to get the sidebar code out of div class="main-content" like that

/* The important part: */

.sidebar {
  float: right;
  position: sticky;
  top: 8px;
  /* This should match the top margin/padding on the body */
}


/* Cosmetics for the demo: */

.main-content {
  min-height: 200vh;
}

.main-content p:first-of-type {
  margin-top: 0;
}

.sidebar {
  width: 25vw;
  min-height: 25vh;
  background-color: #a00;
}

footer {
  min-height: 100vh;
  background-color: #eee;
}

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 8px;
}
<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!--  here sidebar  -->
  <div class="sidebar">
    Sidebar...
  </div>
  <div class="main-content">
    <div>Main content...</div>
    <div>Main content...</div>
    <div>Main content...</div>
    <div>Main content...</div>
    <div>Main content...</div>
  </div>
  <footer>
    Footer...
  </footer>
</body>

</html>

user_171641890 

body {
  margin: 0;
}

.article-wrapper {
  min-height: 200vh;
}

.article-wrapper p:first-of-type {
  margin-top: 0;
}

footer {
  min-height: 30px;
  background-color: #eee;
}

.sidemenu-shares {
  margin: 0;
  display: flex;
  flex-direction: column;
  width: 18vw;
  height: 100vh;
}

.rectangle {
  background: red;
  width: 100%;
  height: 100%;
}

.row {
  display: flex;
}

.column {
  display: flex;
  flex-direction: column;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div class="article-wrapper row">

    <div class="sidemenu-shares">
      <div class="rectangle">
        <ul>
          <li>Home </li>
          <li>Contact</li>
          <li>About</li>
        </ul>
      </div>
    </div>

    <div class="column">

      <div class="main-banner">
        <h1>Title</h1>
      </div>
      <div>
        <div>Main content...</div>
        <div>Main content...</div>
        <div>Main content...</div>
        <div>Main content...</div>
        <div>Main content...</div>
        <div>Main content...</div>
      </div>
    </div>

  </div>

  <footer>
    Footer...
  </footer>
</body>

</html>

Maybe this is the answer that you are looking for but I didn't make the sidebar on top of others instead I inserted the sidebar and main content to a div then I added display flex to make it in a row but if you want still to make the sidebar on the top of others you can just change it's position to absolute ,sticky or fixed then add a margin to the main content and for the footer I used position relative so it won't be affected by the sidebar or you could just set the height of the sidebar

user_154008390

To solve this we need to get appropriate properties from key elements:

  • document.body.scrollHeight - here html has the scrollbar and body is overflowing. scrollHeight gives height of the entire document with overflow.
  • footer.offsetHeight - actual height of the footer.
  • wrapper.getBoundingClientRect().y - this gives y position of wrapper when we scroll down. It's negative cos the wrapper goes up.

Remaining math is simple:

var sideMenu, footer, wrapper, nsl;

document.addEventListener("DOMContentLoaded", init, false);

function check() {
  var range = document.body.scrollHeight - footer.offsetHeight;
  var position = (nsl.offsetHeight + nsl.getBoundingClientRect().y - wrapper.getBoundingClientRect().y).toFixed(1);

  nsl.innerText =
    '\n Range: ' + range +
    '\n Position: ' + position;

  if (window.scrollY > 200 && (range > position)) {
    nsl.style.visibility = "visible";
  } else {
    nsl.style.visibility = "hidden";
  }
};

function init() {
  sideMenu = document.getElementById('sideMenu');
  footer = document.getElementById('footer');
  wrapper = document.getElementById('wrapper');
  nsl = document.getElementById('navShareLink');

  window.onscroll = check;
  check();
}
.article-wrapper {
  min-height: 200vh;
  position: relative;
  top: 0;
  left: 0;
}

.article-wrapper p:first-of-type {
  margin-top: 0;
}

footer {
  min-height: 100vh;
  background-color: lightskyblue;
}

.sidemenu-shares {
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  flex-wrap: nowrap;
  gap: 40px;
}

.rectangle {
  z-index: 998;
  transition: opacity 0.5s;
  padding: 5px;
  height: 106px;
  width: 123px;
  background-color: rgba(200, 0, 0, 0.1);
  border-radius: 24px;
}

.content {
  height: 50px;
  border: 1px dotted gray;
}
<div id="wrapper" class="article-wrapper">

  <div id='sideMenu' class="sidemenu-shares">
    <div id="navShareLink" class="rectangle">

    </div>
  </div>

  <div class="main-banner">
    <h1>Title</h1>
  </div>

  <div class='content'>Main content...</div>
  <div class='content'>Main content...</div>
  <div class='content'>Main content...</div>
  <div class='content'>Main content...</div>
  <div class='content'>Main content...</div>
  <div class='content'>Main content...</div>
  <div class='content'>Main content...</div>
  <div class='content'>Main content...</div>
  <div class='content'>Main content...</div>
</div>

<footer id='footer'>
  Footer...
</footer>


Check the output in full page mode.

user_152739680
Related