스클롤 위치에 따라 다라다니기 어떻게하면 될까요!? 부탁드립니다.

스클롤 위치에 따라 다라다니기 어떻게하면 될까요!? 부탁드립니다.

QA

스클롤 위치에 따라 다라다니기 어떻게하면 될까요!? 부탁드립니다.

본문

상담신청 하단에 있는 바가 스크룰 위치에 따라 하단에 계속해서 따라다니게 하고 싶습니다. 

 

알아봐도 잘 안되네요. 꼭즘 작동될 수 있도록 부탁드립니다. 

 

tail.php

↓이부분을 어떻게하면 되나요? 

 

<div class="footer_counsel clearfix">
    <div class="inner">
        <h2><img src="<?=G5_THEME_URL?>/img/q_counsel_tit.png" alt=""></h2>
        <div class="box">
        
        
            <form id="footer_counsel_form" name="footer_counsel_form" action="<?=G5_THEME_URL?>/tl_counsel/apply_x.php" method="post">
            <input type="hidden" name="ci_id" value="3">
                <fieldset>
                    <legend class="sr_only">빠른상담</legend>
                    <div class="box1">
                        <p class="frow">
                            <label for="co_name">이름</label>
                            <input type="text" name="co_name"  id="co_name" class="form_txt">
                        </p>
                        <div class="frow">
                            <input type="hidden" id="co_hp" name="co_hp" />
                            <label for="co_hp2">전화번호</label>
                            <div class="tel_box">
                                <select id="co_hp1" maxlength="4" class="phone" groupname="txtNum"  requird="">
                                    <option value="010">010</option>
                                    <option value="011">011</option>
                                    <option value="016">016</option>
                                    <option value="017">017</option>
                                    <option value="018">018</option>
                                    <option value="019">019</option>
                                </select>
                                <input type="text" id="co_hp2" maxlength="4" class="phone" groupname="txtNum"  requird="">
                                <input type="text" id="co_hp3" maxlength="4" class="phone" groupname="txtNum"  requird="">
                            </div>
                        </div>
                    </div>
                    <div class="box2">
                        <p class="frow">
                            <label for="co_text_1">내용</label>
                            <textarea id="co_text_1" required="" name="co_text_1"></textarea>
                        </p>
                    </div>
                    <div class="box3">
                        <div class="privacy">
        <input type="checkbox" name="counsel_agree" id="counsel_agree" value="yes" class="checkbox" checked="">
          개인정보 취급방침 동의 </div>
                        <input type="submit" value="신청하기" class="btn_submit">
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>

 

 

<CSS 코드>

 

.footer_counsel {padding:42px 0; background:#f7d654;}
.footer_counsel h2 {float:left; width:188px;}
.footer_counsel label {width:90px; display:inline-block; font-size:22px; color:#000000; line-height:46px;}
.footer_counsel input[type="text"], .footer_counsel select { height:50px; padding:0 10px; font-size:22px; color:#1e353c; border:0; width:100% }
.footer_counsel .box { margin-bottom:-10px; vertical-align:top;}
.footer_counsel .box1 {float:left; width:40%; padding:0 32px;}
.footer_counsel .box1 label {width:90px;}
.footer_counsel .tel_box { width:100%; overflow:hidden; display:inline-block; vertical-align:middle;}
.footer_counsel .tel_box input[type="text"], .footer_counsel .tel_box select {float:left; width:32%; }
.footer_counsel .tel_box input[type="text"] {margin-left:2%;}
.footer_counsel .box2 {float:left; width:34%;}
.footer_counsel .box2 label {width:50px;  vertical-align:top;}
.footer_counsel .box2 textarea {width:100%; height:110px; padding:5px 10px; border:0; font-weight:300; font-size:22px; color:#000;}
.footer_counsel .box3 {float:right; width:20%; position:relative}
.footer_counsel .frow {margin-bottom:10px; position:relative; padding-left:100px;}
.footer_counsel .frow label {position:absolute; left:0;}
.footer_counsel .frow2 { margin-bottom:10px; position:relative; padding-left:80px}
.footer_counsel .btn_submit {width:100%; margin-top:36px; font-size:24px; color:#ffffff; line-height:50px; background:#3264c7;}
.footer_counsel .checkbox { width: 18px; height: 18px; vertical-align: middle; border: 5px solid #3a3a3a; background-color: transparent;}
.footer_counsel .privacy{position:absolute;top:0;color:#000;font-size:16px;letter-spacing:-.5px; text-align:left}

@media screen and (max-width:1080px) {
    .footer_counsel h2 { width:100%; float:none}
    .footer_counsel .box1 { width:100%;}
    .footer_counsel .box2 { width:100%; padding:0 32px}
    .footer_counsel .box3 { width:100%; padding:0 32px}
}

이 질문에 댓글 쓰기 :

답변 2

.footer_counsel{

position : fixed;

(top,bottom,left,right) : 원하는 값 px 

}

넣어봤는데 div 따라 다니는게 아니고 삭제되어 버리네요? ㅠ 

왜 그럴까요?

 

<사이트>

http://saeidental.com

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

회원로그인

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