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 .removeClass() actions do not even apply when prompted.

This is a brief example of the if/else statement referenced, along with the according CSS:

 $(document).ready(function() { var $window = $(window); var div2 = $('#toggle-element'); var div1 = $('#container'); $window.on('scroll', function() { 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; } #container { width: 60%; height: 2000px; margin: 0 auto; position: relative; background: blue; display: block; text-align: center; color: #fff; } 

UPDATE: Here is a full snippet utilizing the example above:

 $(document).ready(function() { var $window = $(window); var div2 = $('#toggle-element'); var div1 = $('#container2'); $window.on('scroll', function() { var scrollTop = document.documentElement.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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="toggle-element"> <div class="wrap"> <a href="#" class="navbtns prev" title="Go to Next Page"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M25,50A25,25,0,1,0,0,25,25,25,0,0,0,25,50ZM25,2A23,23,0,1,1,2,25,23,23,0,0,1,25,2Zm-3,9V39L32,25Z" style="fill-rule:evenodd"/></svg> </a> <a href="#" class="navbtns next" title="Go to Previous Page"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M25,50A25,25,0,1,1,50,25,25,25,0,0,1,25,50ZM25,2A23,23,0,1,0,48,25,23,23,0,0,0,25,2Zm3,9V39L18,25Z" style="fill-rule:evenodd"/></svg> </a> </div> </div> <div id="container1"> Scroll down to <b>#container2</b> </div> <div id="container2"> This is <b>#container2</b> </div> <div id="container3"> Scroll up to <b>#container2</b> </div> 

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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="toggle-element"> <div class="wrap"> <a href="#" class="navbtns prev" title="Go to Next Page"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M25,50A25,25,0,1,0,0,25,25,25,0,0,0,25,50ZM25,2A23,23,0,1,1,2,25,23,23,0,0,1,25,2Zm-3,9V39L32,25Z" style="fill-rule:evenodd"/></svg> </a> <a href="#" class="navbtns next" title="Go to Previous Page"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M25,50A25,25,0,1,1,50,25,25,25,0,0,1,25,50ZM25,2A23,23,0,1,0,48,25,23,23,0,0,0,25,2Zm3,9V39L18,25Z" style="fill-rule:evenodd"/></svg> </a> </div> </div> <div id="container1"> Scroll down to <b>#container2</b> </div> <div id="container2"> This is <b>#container2</b> </div> <div id="container3"> Scroll up to <b>#container2</b> </div>