if / else语句在Safari中不起作用？ （JQuery的）
我已经应用了一个if / else语句（在一个更大的函数中），它似乎在Safari浏览器中根本没有处理。 提示时， .addClass()和.removeClass()操作甚至不适用。
这是引用的if / else语句的简短示例，以及相应的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; }
更新：以下是使用上述示例的完整代码段：
$(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; }
Scroll down to #container2 This is #container2 Scroll up to #container2
感谢MikaelLennholm的推荐，这个问题现在已经解决了！
复杂性似乎与document.documentElement.scrollTop 。 通过用$(window).scrollTop()替换它，脚本现在可以跨浏览器顺利运行。
以下是工作脚本的片段：
$(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