Necesito poder usar los tres valores de la variable DocHeight obedeciendo a la propiedad del tamaño de la fuente en css, el error está en los if pero no sé como hacerlos funcionar a la vez; independientemente lo hacen.
if ($(".basic_unit").css("fontSize", 2)){ var DocHeight= 11000;};
if ($(".basic_unit").css("fontSize", 6)){ var DocHeight= 32500;};
if ($(".basic_unit").css("fontSize", 8)){ var DocHeight= 48500;};
var variableXXX = false;
$(window).scroll(function() {
var scrollPercent = 100 * $(window).scrollTop() / DocHeight;
if ( scrollPercent >= 5 && variableXXX == false){
variableXXX = true;
alert($(document).scrollTop());
}
});
var variableXX = false;
$(window).scroll(function() {
var scrollPercent = 100 * $(window).scrollTop() / DocHeight;
if ( scrollPercent >= 5 && variableXX == false){
variableXX = true;
$(".onscroll5").fadeIn(0);
}
else if ( scrollPercent < 5 && variableXX == true){
variableXX = false;
$(".onscroll5").fadeIn(0);
}
});
body{ margin:0; padding:0;}
#header{width:100%; border-bottom:red 1px solid; position:fixed; height:30px;z-index:1000; margin-top:0;}
#wraper{width:100%; padding-top:30px; text-align:center; }
.basic_unit{width:800px; height:1300px; border:rgba(0,0,0,1.00) solid 1px; margin:auto;}
.basic2{width:200px; height:200px; background:red; display:none;}
.fixed {position:fixed;}
.center_center{ display:inline-block;z-index:100;}
#container{overflow:hidden; background:rgba(255,0,234,0.20); display:inline-block; }
.left { margin-left:0; }
.right { right:0; }
.left_total {left:0;}
.right_total {right:0;}
.center { left:50%; transform:translate(-50%, 0); }
.top { top:30px;; }
.bottom { bottom:0; }
.middle { top:50%; transform:translate(0, -50%); }
.center.middle { transform:translate(-50%, -50%); }
#right_wraper{ float:right; border: 1px black solid; width:300px; text-align:right;}
.intime{width:200px; height:200px; background:blue; display:none;}
.inscroll{width:20px; height:20px; background:yellow; display:none;}
.triggers{ background:rgba(0,255,252,1.00); width:40px; height:40px;}
@media (max-width: 700px) {
.basic_unit {
font-size:2px;
}
}
@media (min-width:701px) and (max-width : 1200px) {
.basic_unit {
font-size:6px;
}
}
@media (min-width : 1201px) {
.basic_unit {
font-size:8px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
</div>
<div id="wraper">
<div id="container">
<div id="right_wraper">
<!--IN SCROLL-->
<div class="inscroll fontbig1 onscroll5 fixed middle outtime2 "></div>
</div>
<!--IN SCROLL-->
<div class="inscroll fontmedium3 onscroll10 fixed bottom center outscroll25 right_left" style="border: solid black 50px"></div>
<!--TRIGGERS-->
<div class="triggers fixed top left_total">
</div>
<div class="triggers fixed bottom left_total">
</div>
<div class="triggers fixed top right_total">
</div>
<div class="triggers fixed bottom right_total">
</div>
<div class="basic_unit">
A <p style="font-size:6px;">A</p><p style="font-size:8px;">A</p><p style="font-size:2px;">A</p>
</div>
<div class="basic_unit">
</div>
<div class="basic_unit">
</div>
<div class="basic_unit">
</div>
<div class="basic_unit">
</div>
<div class="basic_unit">
</div>
</div>
</div>