if / else语句在Safari中不起作用? (JQuery的) [英] if/else Statement Not Working in Safari? (JQuery)
问题描述
我已经应用了一个if / else语句,(在一个更大的函数中),在Safari浏览器中似乎根本没有处理。 .addClass()
和 .removeClass()
操作在提示时甚至不适用。
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.
这是引用的if / else语句的简短示例,以及相应的CSS:
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>
推荐答案
感谢 MikaelLennholm 的推荐,问题现在已经解决了!
Thanks to MikaelLennholm's recommendation, the issue has now been resolved!
复杂性似乎与 document.documentElement.scrollTop
有关。通过将其替换为 $(窗口).scrollTop()
,脚本现在可以跨浏览器顺利运行。
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>
这篇关于if / else语句在Safari中不起作用? (JQuery的)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!