if/else Statement Not Working in Safari? (JQuery)

Question

I have applied an if/else statement, (within a larger function), that does not seem to process at all in the Safari browser. The .addClass() and .removeCl

Answer 1

Thanks to MikaelLennholm's recommendation, the issue has now been resolved!

The complication seemed to be with document.documentElement.scrollTop. By replacing it with $(window).scrollTop(), the script now runs smoothly cross-browser.

Here is a snippet of the working script, in action:

$(document).ready(function() {
  var $window = $(window);
  var div2 = $('#toggle-element');
  var div1 = $('#container2');
  $window.on('scroll', function() {
    var scrollTop = $(window).scrollTop();
    var viewport_height = $window.height();
    var scrollTop_bottom = scrollTop + viewport_height;
    var window_top_to_div2 = ($window.height() - div2.height()) / 2;
    var div1_top = div1.offset().top;
    var div1_height = div1.height();
    var div1_bottom = div1_top + div1_height;
    if (scrollTop >= (div1_top - window_top_to_div2) && (scrollTop + window.innerHeight) <= (div1_bottom + window_top_to_div2)) {
      div2.addClass('show');
    } else {
      div2.removeClass('show');
    }
  });
});

#toggle-element {
  height: 50px;
  text-align: center;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 50%;
  left: 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 500ms, visibility 500ms;
  -o-transition: opacity 500ms, visibility 500ms;
  transition: opacity 500ms, visibility 500ms;
  z-index: 1;
  position: fixed;
  max-width: 1000px;
  width: 100%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

#toggle-element.show {
  visibility: visible;
  opacity: 1;
}

#toggle-element .wrap {
  position: relative;
  height: 50px;
  width: 80%;
  margin: 0 auto;
}

#toggle-element .navbtns {
  display: table-cell;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  background: transparent;
}

#toggle-element .navbtns svg {
  fill: blue;
  opacity: .8;
  overflow: visible;
  will-change: opacity;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#toggle-element .navbtns svg:hover {
  opacity: 1;
}

#toggle-element .prev {
  right: 0;
  margin-right: -25px;
}

#toggle-element .next {
  left: 0;
  margin-left: -25px;
}

#container1,
#container3 {
  width: 60%;
  height: 1000px;
  background: yellow;
  margin: 0 auto;
  display: block;
  text-align: center;
}

#container2 {
  width: 60%;
  height: 2000px;
  margin: 0 auto;
  position: relative;
  background: blue;
  display: block;
  text-align: center;
  color: #fff;
}

  

    
      
    
    
      
    
  


  Scroll down to #container2


  This is #container2


  Scroll up to #container2