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(); } }) 참고사이트 : 노랑강정 |
- 다음글 [Jquery] 첨부파일 추가 삭제
- 이전글 [Jquery] 숫자 효과 1