toggleClass可以在Safari中使用吗？ （JQuery的）

我还没有找到一个问题的解决方案，我正面临一个使用.toggleClass()来切换元素可见性的脚本。 下面的示例目前将.show类#pgnav到Firefox和Chrome中的#pgnav ，但出于某种原因，该操作根本不适用于Safari。

请查看下面的代码段以获得进一步的参考：

 $(document).ready(function() { var $window = $(window); var div2 = $('#pgnav'); 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'); } }); }); 

 #pgnav { 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%); } #pgnav.show { visibility: visible; opacity: 1; } #pgnav .wrap { position: relative; height: 50px; width: 80%; margin: 0 auto; } #pgnav .navbtns, #pgnav-min .navbtns { display: table-cell; width: 50px; height: 50px; position: absolute; top: 0; background: transparent; } #pgnav .navbtns svg, #pgnav-min .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; } #pgnav .navbtns svg:hover, #pgnav-min .navbtns svg:hover { opacity: 1; } #pgnav .prev { right: 0; margin-right: -25px; } #pgnav .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  

Answer 1

在safari可见性在某些元素中不起作用，一种能够实现的方法是保存元素，修改它们并替换它们，在jquery中使用detach并追加替换它们。

Answer 2

 $(document).ready(function() { var $window = $(window); var div2 = $('#pgnav'); 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)) { $('#main').prepend(div2); } else { $('#pgnav').detach(); } }); }); 

 #pgnav { height: 50px; text-align: center; margin: auto; top: 0; bottom: 0; right: 50%; left: 50%; visibility: visible; opacity: 1; -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%); } #pgnav.show { visibility: visible; opacity: 1; } #pgnav .wrap { position: relative; height: 50px; width: 80%; margin: 0 auto; } #pgnav .navbtns, #pgnav-min .navbtns { display: table-cell; width: 50px; height: 50px; position: absolute; top: 0; background: transparent; } #pgnav .navbtns svg, #pgnav-min .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; } #pgnav .navbtns svg:hover, #pgnav-min .navbtns svg:hover { opacity: 1; } #pgnav .prev { right: 0; margin-right: -25px; } #pgnav .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