테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

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

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

참고한 링크는 여기구요

https://sir.kr/qa/443407

 

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>

#javascript #헤더 #css #html #풀페이지
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
끄끄

해당 참고 질문에 히돌님께서 답변올리신 것처럼 해당 섹션.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개

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

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

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

로그인

전체 질문 목록

md

홍따삼
프로필 보기이 회원 글보기이 회원의 댓글보기
 1개월 전 조회 149
그누보드5 라라곤 php 회원스킨 pg
답변대기

ssssssssssss

홍따삼
프로필 보기이 회원 글보기이 회원의 댓글보기
 1개월 전 조회 57
그누보드5
답변대기

aaaaaaaaaaaaaaaaa

홍따삼
프로필 보기이 회원 글보기이 회원의 댓글보기
 1개월 전 조회 41
그누보드5
답변대기

마크다운

홍따삼
프로필 보기이 회원 글보기이 회원의 댓글보기
 1개월 전 조회 44
그누보드5
답변대기

11111111111

홍따삼
프로필 보기이 회원 글보기이 회원의 댓글보기
 1개월 전 조회 34
그누보드5
답변대기

따삼이 질문ㅇ

홍따삼
프로필 보기이 회원 글보기이 회원의 댓글보기
 1개월 전 조회 34
그누보드5
답변대기

md 형식이 잘 나오나?

홍따삼
프로필 보기이 회원 글보기이 회원의 댓글보기
 1개월 전 조회 100
그누보드5
답변대기

안녕하세요. 첫 질문입니다. 하하하

지지이름
프로필 보기이 회원 글보기이 회원의 댓글보기
 1개월 전 조회 60
그누보드5
답변대기

test1

tthisgun2
프로필 보기이 회원 글보기이 회원의 댓글보기
 1개월 전 조회 182
그누보드5
답변대기

test1

tthisgun2
프로필 보기이 회원 글보기이 회원의 댓글보기
 1개월 전 조회 98
그누보드5
채택

상품명 동일할 경우 등록 안되게

jjeal2j19azd1
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 399
그누보드5
답변대기

로컬에서 라라곤 설치후, 그누보드 및 테마 적용후 에러가 납니다.

크크림빵1
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 225
그누보드5 라라곤 php
답변대기

그누보드 에디트 에러

텔로미어73
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 114
그누보드5
답변대기

제로보드인지 제로보드XE인지 그누보드인지 확인해주세요

초초록물고기
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 146
그누보드5
답변대기

그누보드 iframe 연결 문제

텔로미어73
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 124
그누보드5
채택

자동등록방지 숫자가 틀렸습니다 라고 합니다

소소비
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 111 추천 1
회원스킨
채택

카드결제 수수료 낮출 수 있는 팁을 얻고 싶습니다.

라라이언허
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 98
pg
답변대기

최고 관리자 아이디비번이 없어요

제비네
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 136
그누보드5
답변대기

영카트 사용안하고 일반 홈페이지에서 PG 결제연동 방법

ccnplus114
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 98
영카트5 그누보드5 pg kg이니시스
답변대기

영카트 PG사 도메인 변경

ccnplus114
프로필 보기이 회원 글보기이 회원의 댓글보기
 2개월 전 조회 108
영카트5
채택
🐛 버그신고