2026, 새로운 도약을 시작합니다.
SIR
목록으로
이전글 다음글

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

지지와태그
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전 조회 4,521
답변 1
목록

참고한 링크는 여기구요

https://sir.kr/qa/443407

sec1은 기존 색상이되 sec2부터 헤더의 텍스트 색상이 변경되게 하고싶습니다.

구글링해서 찾아봤는데 잘 안나오더라구요 ..

혹시 아시는 분 있으시면 답변해주시면 감사하겠습니다!

밑에 코드 첨부합니다!

html코드입니다!

Copy 
<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코드입니다!

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 
<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>
#javascript #헤더 #css #html #풀페이지

답변 1개

채택된 답변
+20 포인트

해당 참고 질문에 히돌님께서 답변올리신 것처럼 해당 섹션.height구해서 스타일 넣으면 될텐데요?

Copy 
const he = $("첫번째섹션").innerHeight();
      $(window).scroll(function(){
        let scroll = $(window).scrollTop();
        if (scroll > he) {
          $("색상변경할 텍스트").css("color" , "#fff");
        }
        else{
          $("색상변경할 텍스트").css("color" , "#000");   
        }
      })

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

참고해서 작업해보겠습니다! 답변남겨주셔서 감사합니다!

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고