특정세션부터 헤더의 텍스트색상이 변경되게 하고싶어요
본문
참고한 링크는 여기구요
sec1은 기존 색상이되 sec2부터 헤더의 텍스트 색상이 변경되게 하고싶습니다.
구글링해서 찾아봤는데 잘 안나오더라구요 ..
혹시 아시는 분 있으시면 답변해주시면 감사하겠습니다!
밑에 코드 첨부합니다!
html코드입니다!
<header id="header" class="main_header">
<div id="headerwrap">
<h1 class="logo" style="cursor: pointer;" onclick="location.href='#';"></h1>
<nav id="nav"><!--hide는script.js파일에 있음-->
<ul class="gnb">
<li><a href="#">Who we are</a></li>
<li><a href="#">What we do</a></li>
<li><a href="#">How we work</a></li>
<li><a href="#">Work with us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
<div class="header_js hamburger_menu_wrap">
<div class="hamburger_menu">
<span class="bar_top"></span>
<span class="bar_middle"></span>
<span class="bar_bottom"></span>
</div>
</div>
</div>
</header>
<div class="overlay_nav nav-overlay--horizontal">
<div class="overlay_nav_container">
<ul id="main_overlay_nav" class="nav_menu">
<li><a href="../main/index.html">ABOUT</a>
<ul class="nav_sub_menu sub_1">
<li><a href="#" class="sub_ceo">CEO</a></li>
<li><a href="#" class="sub_business">Business</a></li>
<li><a href="#" class="sub_history">History</a></li>
<li><a href="#" class="sub_contact">Contact</a></li>
</ul>
</li>
<li><a href="../work/index.html">WORK</a>
<ul class="nav_sub_menu sub_2">
<li><a href="#">Project</a></li>
<li><a href="#">Partners</a></li>
</ul>
</li>
<li><a href="../news/index.html">NEWS</a>
<ul class="nav_sub_menu sub_3">
<li><a href="#">News</a></li>
<li><a href="#">Webzine</a></li>
</ul>
</li>
<li><a href="../people/index.html">PEOPLE</a>
<ul class="nav_sub_menu sub_4">
<li><a href="#">People</a></li>
<li><a href="#">Recruit</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrap">
<!-- fullpage.js 사용을 위한 Setting
fullpage, section은 수정하시면 안돼요!-->
<div id="fullpage">
<div class="section active">
<!-- 각 section 별 내용은 section 태그 안에 넣어주시면 됩니다! -->
<!-- Visual Section Start -->
<section class="sec1">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide banner1"></div>
<div class="swiper-slide banner2"></div>
<div class="swiper-slide banner3"></div>
</div>
<!-- 네비게이션 지정 -->
<!--<div class="swiper-pagination"></div>-->
<div class="swiper-button-next"></div><!-- 다음 버튼 (오른쪽에 있는 버튼) -->
<div class="swiper-button-prev"></div><!-- 이전 버튼 -->
</div>
</section>
</div>
<div class="section">
<section class="sec2">
<div class="container"></div>
</section>
</div>
<div class="section">
<section class="sec3">
<div class="container"></div>
</section>
</div>
</div>
</div>
css코드입니다!
#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입니다
<script>
$(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');
}
});
</script>
답변 1
해당 참고 질문에 히돌님께서 답변올리신 것처럼 해당 섹션.height구해서 스타일 넣으면 될텐데요?
const he = $("첫번째섹션").innerHeight();
$(window).scroll(function(){
let scroll = $(window).scrollTop();
if (scroll > he) {
$("색상변경할 텍스트").css("color" , "#fff");
}
else{
$("색상변경할 텍스트").css("color" , "#000");
}
})
이런식으로 하면 되지 않을까요?
참고해서 작업해보겠습니다! 답변남겨주셔서 감사합니다!
답변을 작성하시기 전에 로그인 해주세요.