통합검색

Javascript

[Jquery] 화면 아래로 내려갔을때 class 추가

  • 2022.11.03 10:19:47
[!]HTML[/!]
 
<div id="fast-inquiry-form">
    <div class="wrap">
    <form action="#">
        <fieldset class="inr">
            <legend>창업문의</legend>
            <div class="tit">
                <img src="<?=DIR?>/images/main/fast-inquiry-logo.png" alt="">
                <p>가맹문의</p>
                <a href="tel:<?=$config_tel[0]?>"><?=$config_tel[0]?></a>
            </div>
            <div class="boxs">
                <input type="text" class="inp" placeholder="성함">
                <input type="text" class="inp" placeholder="연락처(’-’ 제외)">
                <select class="sel">
                    <option value="">창업희망지역 선택</option>
                </select>
            </div>
            <div class="agree">
                <input type="checkbox" id="_agree" name="_agree">
                <label for="_agree">개인정보수집 동의</label>
                <a href="#" data-pop-href="<?=SUBPAGE?>/popup/private" data-pop-chain="pop1" data-pop-size="500,650">[확인]</a>
            </div>
            <input type="submit" value="문의하기" class="sbm">
        </fieldset>
    </form>
    </div>
</div>





[!]CSS[/!]
 
#fast-inquiry-form {height: 100px;position: relative;z-index: 77;}
#fast-inquiry-form legend {display: none;}
#fast-inquiry-form .wrap {position: absolute;bottom: 0;left: 0;right: 0;height: 100px;background: var(--color);}
#fast-inquiry-form .wrap .inr {height: 100px;display: flex;align-items: center;justify-content: space-between;max-width: 1400px;margin: 0 auto;}
#fast-inquiry-form .tit {position: relative;padding-left: 75px;}
#fast-inquiry-form .tit > img {position: absolute;bottom: 0;left: 0;}
#fast-inquiry-form .tit > * {display: block;}
#fast-inquiry-form .tit > p {font-size: 20px;color: #111111;font-weight: 800;line-height: 23px;}
#fast-inquiry-form .tit > a {font-size: 32px;color: #111111;font-weight: 700;font-family: 'WAGURI';line-height: 35px;}
#fast-inquiry-form .boxs {display: flex;align-items: center;}
#fast-inquiry-form .boxs .inp,
#fast-inquiry-form .boxs .sel {background: #fff;border: 0px;margin-right: 5px;padding: 0 20px;width: 220px;height: 55px;font-size: 18px;color: #777;box-sizing: border-box;}
#fast-inquiry-form .boxs .sel option {color: #777;}
#fast-inquiry-form .boxs .inp {padding-left: 20px;color: #111;}
#fast-inquiry-form .boxs .inp::-webkit-input-placeholder{color: #777;}
#fast-inquiry-form .boxs .inp:-moz-placeholder{color: #777;}
#fast-inquiry-form .boxs .inp::-moz-placeholder{color: #777;}
#fast-inquiry-form .boxs .inp:-ms-input-placeholder{color: #777;}
#fast-inquiry-form .agree {display: flex;align-items: center;position: relative;z-index: 0;}
#fast-inquiry-form .agree input {position: absolute;top: 0;left: 0;width: 0;height: 0;opacity: 0;overflow: hidden;}
#fast-inquiry-form .agree a {font-weight: normal;font-size: 18px;color: #111;letter-spacing: -1px;line-height: 22px;font-weight: 500;text-decoration: none !important;}
#fast-inquiry-form .agree label {font-weight: normal;font-size: 18px;color: #111;letter-spacing: -1px;line-height: 22px;font-weight: 700;margin-right: 5px;}
#fast-inquiry-form .agree input + label {padding-left: 30px;position: relative;z-index: 0;}
#fast-inquiry-form .agree input + label:after {display: block;content: '';position: absolute;top: -1px;left: 0;width: 24px;height: 24px;border-radius: 50%;border: 2px solid #111;box-sizing: border-box;}
#fast-inquiry-form .agree input:checked + label:after {content: '\e116';font-family: 'axicon';font-size: 14px;color: #fff;background-color: #111;line-height: 20px;text-align: center;}
#fast-inquiry-form .sbm {border: 0px;background: var(--color-red);width: 160px;height: 55px;font-weight: normal;font-size: 21px;color: #fff;font-weight: 700;}
#fast-inquiry-form.fix .wrap {position: fixed;z-index: 55;}




[!]jquery[/!]
//Bottom Fixed
botFix = {
    'init' : function(){
        this.action();
    },
    'action' : function(){
        var $ele = {
            'foot' : $('#footer'),
            'wrap' : $('#fast-inquiry-form')
        }
        var classFix = function(){
            var wt = $(window).scrollTop();
            var wh = $(window).height();
            var tt = $ele.foot.offset().top;
            if(wt < tt - wh){
                $ele.wrap.addClass('fix');
            }else{
                $ele.wrap.removeClass('fix');
            }
        }
        $(window).on({
            'load scroll' : function(){
                classFix();
            }
        });
    }
}
$(function(){
    if($('#fast-inquiry-form').length>0){
        botFix.init();
    }
})




참고사이트 : 노랑강정