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;
}
See Question&Answers more detail:os