keep button hidden when one of multiple elements exits the viewport

Question

I'm using camwiegert InView: https://github.com/camwiegert/in-view

It works well whenever there is a single element: if you scroll you can see that when there is a circle, a square, or a triangle the #cta-button disappears, but when there are two elements in the viewport when the first one leaves the screen, the button appears and stays onscreen:

1.

2.

Video of the bug: http://sitetesting1881.000webhostapp.com/inview/button-still-shows.mov

Here is my working example: http://sitetesting1881.000webhostapp.com/inview/

Github repository for download and test :) https://github.com/blacksun-mks/inview/

What I want to achieve is that when there are two or more elements, and one of them leaves the viewport, the button is always hidden as long as some element is still on the screen.

$(document).ready(() => {
  inView('.triangle')
    .on('enter', el => {
      $("#cta-button").hide();
    })
    .on('exit', el => {
      $("#cta-button").show();
    });
  inView('.square')
    .on('enter', el => {
      $("#cta-button").hide();
    })
    .on('exit', el => {
      $("#cta-button").show();
    });
  inView('.circle')
    .on('enter', el => {
      $("#cta-button").hide();
    })
    .on('exit', el => {
      $("#cta-button").show();
    });
});

// This is the approach I have tried without success

$(document).ready(() => {
  inView('.triangle')
    .on('enter', el => {
      $("#cta-button").hide();
    })
    .on('exit', el => {
      var isSquareInView = inView.is(document.querySelector('.square'));
      var isCircleInView = inView.is(document.querySelector('.circle'));
      if (!isSquareInView && !isCircleInView) {
        $("#cta-button").show();
      }
    });
  inView('.square')
    .on('enter', el => {
      $("#cta-button").hide();
    })
    .on('exit', el => {
      var isTriangleInView = inView.is(document.querySelector('.triangle'));
      var isCircleInView = inView.is(document.querySelector('.circle'));
      if (!isTriangleInView && !isCircleInView) {
        $("#cta-button").show();
      }
    });
  inView('.circle')
    .on('enter', el => {
      $("#cta-button").hide();
    })
    .on('exit', el => {
      var isTriangleInView = inView.is(document.querySelector('.triangle'));
      var isSquareInView = inView.is(document.querySelector('.square'));
      if (!isTriangleInView && !isSquareInView) {
        $("#cta-button").show();
      }
    });
});

body {
  background: #d8f3ff;
}

.square {
  width: 150px;
  height: 150px;
  background: #023047;
}

.circle {
  width: 150px;
  height: 150px;
  background: #8ecae6;
  border-radius: 50%;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 150px solid #fb8500;
}

#cta-button {
  background-color: #d9750b;
  background-image: linear-gradient(#f90 10%, #e76a00 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 1px 3px rgba(0, 0, 0, .2);
  border: 0;
  position: fixed;
  bottom: 10px;
  right: 10px;
  color: #fff;
  text-decoration: none;
  width: 250px;
  height: 50px;
  border-radius: 10px;
  text-align: center;
  line-height: 50px;
  font-family: "Arial", sans-serif;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}






  



  



  



  



  



⬇ SCROLL DOWN

keep button hidden when one of multiple elements exits the viewport

0 Answers