Me gustaría que me ayudasen a simplificar este código con algún tipo de class. La verdad es que no conozco tanto como para hacerlo yo mismo. Les dejo un ejemplo de otra simpflicación con la que amablemente me han ayudado en este foro que es la función de la clase intime.
Este es el código que quiero simplificar:
var kk = false;
var t = false;
var XX = false;
var ff = 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);
}
if (scrollPercent >= 10 && t == false) {
t = true;
$(".onscroll10").fadeIn(0);
} else if (scrollPercent < 10 && t == true) {
t = false;
$(".onscroll10").fadeIn(0);
}
});
$(window).scroll(function() {
var scrollPercent = 100 * $(window).scrollTop() / DocHeight;
if (scrollPercent >= 20 && kk == false) {
kk = true;
$(".outscroll20").fadeOut(0);
} else if (scrollPercent < 20 && kk == true) {
kk = false;
$(".outscroll20").fadeOut(0);
}
if (scrollPercent >= 25 && ff == false) {
ff = true;
$(".outscroll25").fadeOut(0);
} else if (scrollPercent < 25 && ff == true) {
ff = false;
$(".outscroll25").fadeOut(0);
}
});
Y para ello quería basarme en este ejemplo:
$(function() {
// para todos los elementos que contengan intime en su clase
$("[class*=intime]").each(function() {
// usar expresiones regulares para obtener el número detras de intime
var retraso = parseInt($(this).attr("class").match(/intime\d+/g)[0].replace("intime", ""));
// mostrar el elemento con el retraso adecuado
$(this).delay(retraso * 1000).fadeIn(0);
});
});
Lo estoy intentando por mi cuenta y hasta ahora he hecho esto, y aunque no funciona, creo que los tiros podrían ir por aquí:
var variableXX = false;
$(window).scroll(function() {
var scrollPercent = 100 * $(window).scrollTop() / DocHeight;
var porcentaje = parseInt($(this).attr("class").match(/inscroll\d+/g)[0].replace("onscroll",""));
if (scrollPercent >= porcentaje && variableXX == false) {
variableXX = true;
$("[class*=onscroll]").fadeIn(0);
} else if (scrollPercent < porcentaje && variableXX == true) {
variableXX = false;
$(".onscroll5").fadeIn(0);
}
});