scrollTop 자바스크립트
높은 목표를 세우고, 스스로 채직질 한다.
애초에 기대를 하니, 배신을 당하는 것이다.
나는 김근육, 올해로 9수다.
큰 시련 끝에 보상이 무조건 있지는 않는다.
다섯 명중 한명은 무조건 쓰레기다.
노력만으로 안되는 일이 있을 수 있다.
성격만 좋으면 된다는 말은 다 거짓말이다.
큰 복수심은 자기자신을 부슨다.
사람은 아무리 착해 보여도 어두은 면은 언제나 존제한다.
//$(window).scroll(function(){});
//$(window).on("scroll",function(){});
//window.addEventListener("scroll",function(){});
//window.addEventListener("scroll",()=> {});
//const scrollTop =$(window).scrollTop();
// const pageTOffset = window.pageTOffset;
//var pageTOffset = document.documentElement.scrollTop;
// var pageYOffset = window.pageYOffset ||document.documentElement.scrollTop;
// $(".scrollTop").text(scrollTop)
// document.querySelector(".pageYOffset").textContent = pageYOffset; // 최신방식
//$(".scrollTop").html(scrollTop)
//document.querySelector(".pageYOffset").innerHTML = pageYOffset;
window.addEventListener("scroll", () => {
let pageYOffset = (window.pageYOffset || document.documentElement.scrollTop) + screen.height / 2;
console.log("1:" + screen.height / 2)
console.log("2:" + document.documentElement.scrollTop)
console.log("3:" + window.pageYOffset)
//let pageTOffset = document.documentElement.scrollTop;
document.querySelector(".pageYOffset").textContent = pageYOffset;
//$(".s1OT").text(parseInt($("#section1").offset().top));
for (let i = 1; i <= 9; i++) {
document.querySelector(".s" + i + "OT").textContent = document.getElementById("section" + i)
.offsetTop;
if (pageYOffset > document.getElementById("section"+i).offsetTop) {
document.querySelector(".s"+i+"OT").style.color = "red";
} else {
document.querySelector(".s"+i+"OT").style.color = "black";
}
}
// document.querySelector(".s1OT").textContent = document.getElementById("section1").offsetTop;
// document.querySelector(".s2OT").textContent = document.getElementById("section2").offsetTop;
// document.querySelector(".s3OT").textContent = document.getElementById("section3").offsetTop;
// document.querySelector(".s4OT").textContent = document.getElementById("section4").offsetTop;
// document.querySelector(".s5OT").textContent = document.getElementById("section5").offsetTop;
// document.querySelector(".s6OT").textContent = document.getElementById("section6").offsetTop;
// document.querySelector(".s7OT").textContent = document.getElementById("section7").offsetTop;
// document.querySelector(".s8OT").textContent = document.getElementById("section8").offsetTop;
// document.querySelector(".s9OT").textContent = document.getElementById("section9").offsetTop;
// if (pageYOffset > document.getElementById("section1").offsetTop) {
// document.querySelector(".s1OT").style.color = "red";
// } else {
// document.querySelector(".s1OT").style.color = "black";
// }
// if (pageYOffset > document.getElementById("section2").offsetTop) {
// document.querySelector(".s2OT").style.color = "red";
// } else {
// document.querySelector(".s2OT").style.color = "black";
// }
// if (pageYOffset > document.getElementById("section3").offsetTop) {
// document.querySelector(".s3OT").style.color = "red";
// } else {
// document.querySelector(".s3OT").style.color = "black";
// }
// if (pageYOffset > document.getElementById("section4").offsetTop) {
// document.querySelector(".s4OT").style.color = "red";
// } else {
// document.querySelector(".s4OT").style.color = "black";
// }
// if (pageYOffset > document.getElementById("section5").offsetTop) {
// document.querySelector(".s5OT").style.color = "red";
// } else {
// document.querySelector(".s5OT").style.color = "black";
// }
// if (pageYOffset > document.getElementById("section6").offsetTop) {
// document.querySelector(".s6OT").style.color = "red";
// } else {
// document.querySelector(".s6OT").style.color = "black";
// }
// if (pageYOffset > document.getElementById("section7").offsetTop) {
// document.querySelector(".s7OT").style.color = "red";
// } else {
// document.querySelector(".s7OT").style.color = "black";
// }
// if (pageYOffset > document.getElementById("section8").offsetTop) {
// document.querySelector(".s8OT").style.color = "red";
// } else {
// document.querySelector(".s8OT").style.color = "black";
// }
// if (pageYOffset > document.getElementById("section9").offsetTop) {
// document.querySelector(".s9OT").style.color = "red";
// } else {
// document.querySelector(".s9OT").style.color = "black";
// }
// if(pageYOffset > document.getElementById("section1").offsetTop){
// document.getElementById("section1").classList.add("show");
// }else{
// document.getElementById("section1").classList.remove("show");
// }
// if(pageYOffset > document.getElementById("section2").offsetTop){
// document.getElementById("section2").classList.add("show");
// }else{
// document.getElementById("section2").classList.remove("show");
// }
// if(pageYOffset > document.getElementById("section3").offsetTop){
// document.getElementById("section3").classList.add("show");
// }else{
// document.getElementById("section3").classList.remove("show");
// }
// if(pageYOffset > document.getElementById("section4").offsetTop){
// document.getElementById("section4").classList.add("show");
// }else{
// document.getElementById("section4").classList.remove("show");
// }
// if(pageYOffset > document.getElementById("section5").offsetTop){
// document.getElementById("section5").classList.add("show");
// }else{
// document.getElementById("section5").classList.remove("show");
// }
// if(pageYOffset > document.getElementById("section6").offsetTop){
// document.getElementById("section6").classList.add("show");
// }else{
// document.getElementById("section6").classList.remove("show");
// }
// if(pageYOffset > document.getElementById("section7").offsetTop){
// document.getElementById("section7").classList.add("show");
// }else{
// document.getElementById("section7").classList.remove("show");
// }
// if(pageYOffset > document.getElementById("section8").offsetTop){
// document.getElementById("section8").classList.add("show");
// }else{
// document.getElementById("section8").classList.remove("show");
// }
// if(pageYOffset > document.getElementById("section9").offsetTop){
// document.getElementById("section9").classList.add("show");
// }else{
// document.getElementById("section9").classList.remove("show");
// }
/// 한번에 쓰는
// $(".content-item").each(function(){
// if(scrollTop > $(this).offset().top){
// $(this).addClass("show");
// }
// }); // 제이쿼리
document.querySelectorAll(".content-item").forEach(elem => {
console.log(elem.offsetTop);
if (pageYOffset > elem.offsetTop) {
elem.classList.add("show");
} else {
elem.classList.remove("show");
}
});
});