특정세션부터 헤더의 텍스트색상이 변경되게 하고싶어요 채택완료
참고한 링크는 여기구요
sec1은 기존 색상이되 sec2부터 헤더의 텍스트 색상이 변경되게 하고싶습니다.
구글링해서 찾아봤는데 잘 안나오더라구요 ..
혹시 아시는 분 있으시면 답변해주시면 감사하겠습니다!
밑에 코드 첨부합니다!
html코드입니다!
Copy
Who we are
What we do
How we work
Work with us
Contact us
ABOUT
CEO
Business
History
Contact
WORK
Project
Partners
NEWS
News
Webzine
PEOPLE
People
Recruit
css코드입니다!
Copy
#header{
width:100%;
height:5em;
background-color:opacity(0);
}
#headerwrap{
position: relative;
height: 5em;
padding: 0 5%;
width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
background-color:opacity(0);
}
.logo{
width: 150px;
height: 44px;
z-index: 99;
background:url('../../images/logow.png')no-repeat center center;
margin:0;
}
#headerwrap #nav .gnb {
display: flex;
flex-wrap: wrap;
align-items: center;
height: 100%;
}
#headerwrap #nav .gnb li{
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 0 50px;
height: 100%;
}
button{
all:unset;
}
.copyright {
position: fixed;
bottom: 3%;
left: 1.5%;
transform: translateY(-50%);
display: block;
width: 340px;
height: 17px;
z-index: 99;
}
.c_text {
position: relative;
display: block;
width: 340px;
height: 20px;
font-size: 14px;
color:#fff;
}
/* ==================== Main Section Title ==================== */
.section_title {
position: relative;
display: block;
padding-top: 5%;
}
.section_title h3 {
font-family: 'Metropolis', sans-serif;
font-size: 3.2rem;
font-weight: 500;
letter-spacing: -0.5px;
margin-bottom: 0.8rem;
}
.section{
width:100%;
height: 100%;
}
.sec2{
width: 100%;
height: 100%;
background-color: mediumaquamarine;
}
.sec3{
width: 100%;
height: 100%;
background-color: palevioletred;
}
/* ===================== sec1 ===================== */
.sec1 {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.header {
position: relative;
display: block;
width: 100%;
height: 8rem;
z-index: 99;
}
.swiper-container{
width:100%;
height:100%;
}
.swiper-wrapper{
width:100%;
height:100%;
}
.banner1{
width: 100%;
height: 100%;
background:url(../../images/banner1.png)no-repeat center center;
background-size: cover;
}
.banner2{
width: 100%;
height: 100%;
background:url(../../images/banner2.jpg)no-repeat center center;
background-size: cover;
}
.banner3{
width: 100%;
height: 100%;
background:url(../../images/banner3.jpg)no-repeat center center;
background-size: cover;
}
.v_scroll {
position: absolute;
bottom: 8%;
left: 50%;
transform: translateX(-50%);
display: block;
color:#fff;
}
.v_scroll::after {
content: '';
position: absolute;
left: 50%;
top: 40px;
transform: translate(-50%, -50%) rotate(135deg);
display: block;
width: 7px;
height: 7px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
}
.main_title{
width: 35em;
height: 18em;
/*background-color: red;*/
color: #fff;
display: block;
position: absolute;
bottom: 10em;
float: right;
right: 8em;
text-align: right;
}
.main_title h2{
font-size: 40pt;
font-family: 'Metropolis-Regular';
font-weight: 900;
margin-bottom:3rem;
}
.main_title h4{
font-size:22pt;
font-family: 'Metropolis-Regular';
font-weight: 600;
margin-bottom:2rem;
}
.main_title p{
font-size:14pt;
font-family: 'Metropolis-Regular';
font-weight: 400;
margin-bottom:5rem;
}
.main_title a{
border:1px solid #fff;
border-radius: 3em;
padding:15px 30px;
}
.main_title a:hover{
border-radius: 3em;
padding:15px 30px;
color:#000;
background: #fff;
}
js입니다
Copy
$(document).ready(function() {
// fullpage
$('#fullpage').fullpage({
autoScrolling: true,
scrollHorizontally: true,
bigSectionsDestination: top,
anchors: ['sec1', 'sec2', 'sec3'],
menu: '#menu',
scrollingSpeed: 1000,
scrollBar: false,
onLeave: function(origin, destination, direction) {
// 빠른전환으로 이벤트중복시 fullpage와 swiper전환시점 분리막기
$('#fullpage').on('scroll touchmove mousewheel', function(event) {
event.preventDefault();
event.stopPropagation();
return false;
});
swiper.mousewheel.disable();
},
afterLoad: function(anchorLink, index) {
// 전환이 끝난후 이벤트풀기
$('#fullpage').off('scroll mousewheel');
if(!$(".fp-completely .swiper-wrapper").length > 0) $('#fullpage').off('touchmove'); // 모바일분기
if(swiper) swiper.mousewheel.enable();
if(!$(".sec1").hasClass("active")) $.fn.fullpage.setAllowScrolling(true); // 슬라이드 섹션을 벗어나면 휠풀어주기
}
});
// swiper
var length = $(".sec1 .swiper-slide").length;
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 0,
effect:'fade',
freeMode: false,
speed: 3000,
// 3초마다 자동으로 슬라이드가 넘어갑니다. 1초 = 1000
autoplay: {
delay: 3000,
},
navigation : {
nextEl : '.swiper-button-next', // 다음 버튼 클래스명
prevEl : '.swiper-button-prev', // 이번 버튼 클래스명
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
mousewheel: false,
on: {
slideChange: function(){
var idx = this.activeIndex;
// 처음과 마지막 슬라이드가 아닐경우 fullpage전환 막기
if(this.activeIndex != 0 && idx != length) $.fn.fullpage.setAllowScrolling(false);
if(length == 2 && idx == 0) $.fn.fullpage.setAllowScrolling(false) //슬라이드가 2개밖에 없을때
// console.log('즉시 : ' + idx);
},
slideChangeTransitionEnd: function(){
var idx = this.activeIndex;
// 처음과 마지막 슬라이드일 경우 fullpage전환 풀기
if(idx == 0 || idx >= length-1) $.fn.fullpage.setAllowScrolling(true);
// console.log('전환후 : ' + idx);
},
touchMove: function(e) {
var startY = e.touches.startY;
setTimeout(function(){
if(startY > e.touches.currentY) swiper.slideNext();
else swiper.slidePrev();
},100);
},
},
});
//using index
if(index==1){
/* add opacity to arrow */
$('.fa-chevron-down').each(function(){
$(this).css('opacity','1')
});
$('.header-links a').each(function(){
$(this).css('color','white')
});
$('.header-links').css("background-color","transparent");
}
else if(index!=1){
$('.header-links a').each(function(){
$(this).css('color','black')
});
$('.header-links').css('background-color', 'white');
}
});
답변 1개
채택된 답변
+20 포인트
3년 전
해당 참고 질문에 히돌님께서 답변올리신 것처럼 해당 섹션.height구해서 스타일 넣으면 될텐데요?
Copy
const he = $("첫번째섹션").innerHeight();
$(window).scroll(function(){
let scroll = $(window).scrollTop();
if (scroll > he) {
$("색상변경할 텍스트").css("color" , "#fff");
}
else{
$("색상변경할 텍스트").css("color" , "#000");
}
})
이런식으로 하면 되지 않을까요?
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인