특정세션부터 헤더의 텍스트색상이 변경되게 하고싶어요

특정세션부터 헤더의 텍스트색상이 변경되게 하고싶어요

QA

특정세션부터 헤더의 텍스트색상이 변경되게 하고싶어요

본문

참고한 링크는 여기구요

https://sir.kr/qa/443407

 

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");   
        }
      })

이런식으로 하면 되지 않을까요?

답변을 작성하시기 전에 로그인 해주세요.
전체 27
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT