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