스크롤시 나오는 영역이요~

스크롤시 나오는 영역이요~

QA

스크롤시 나오는 영역이요~

본문


<script>
    
$(document).ready(function () {       
       
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ? true : false;
   
     if(!isMobile) {
         
        //모바일이 아닌 경우 스크립트
        $(window).scroll(function(){
           var btn_guide_offset = $("#sit_rel").offset();
           var btn_guide_height = btn_guide_offset.top;
           var list_btn_height = $("#right__wrap").height();
           var bottom_size = btn_guide_height - list_btn_height + 120;
           if(bottom_size < $(this).scrollTop()) {
              $("#right__wrap").removeClass("fixed");
           }else{
              $("#right__wrap").addClass("fixed");
           }
           if(190 < $(this).scrollTop() && bottom_size > $(this).scrollTop()) {
              $("#right__wrap").addClass("fixed");
           }else{
              $("#right__wrap").removeClass("fixed");
           }
        });
         
     } else {
         
        //모바일인 경우 스크립트
        $(function(){
            var stickyHeaderTop = $('#sit_ov_btn').offset().top+$('#sit_ov').height()/1;
            $(window).scroll(function(){
               if( $(window).scrollTop() > stickyHeaderTop ) {
                       $('#sit_ov').addClass("fixed");
                      $('#sit_ov').removeClass("static");
                       $('.gg').height();
               } else {
                       $('#sit_ov').removeClass("fixed");
                       $('#sit_ov').addClass("static");
              }
            });
            $('.op_btn').click(function() {
                $('.scroll_show').toggle();
             });
            $(".sit_ov_height").css('height', $("#sit_ov").height());
            });
         
     }
                       
});

</script>

 

모바일 접속 시 나오는 스크립트가

스크롤 하면 나오면서 붙는 스크립트인데요

스크롤을 많이 내려야만 나오거든요

스크롤 없이 바로 나오게 할려면 멀 고쳐야할까요?

디자이너에요~

이 질문에 댓글 쓰기 :

답변 2

다음과 같은 방법도 있으니 참고해서 적용해 보세요

 

스크롤 없이 바로 나타나게 하려면 $(window).scrollTop()의 값을 비교하는 조건을 수정하면 됩니다.

예를 들어, 현재 stickyHeaderTop에서 50px 정도 더 빠르게 나타나도록 조정하려면 $(window).scrollTop() > stickyHeaderTop - 50로 수정하면 됩니다.


$(function () {
  var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ? true : false;
  if (!isMobile) {
    // 모바일이 아닌 경우 스크립트
    $(window).scroll(function () {
      var btn_guide_offset = $("#sit_rel").offset();
      var btn_guide_height = btn_guide_offset.top;
      var list_btn_height = $("#right__wrap").height();
      var bottom_size = btn_guide_height - list_btn_height + 120;
      if (bottom_size < $(this).scrollTop()) {
        $("#right__wrap").removeClass("fixed");
      } else {
        $("#right__wrap").addClass("fixed");
      }
      if (190 < $(this).scrollTop() && bottom_size > $(this).scrollTop()) {
        $("#right__wrap").addClass("fixed");
      } else {
        $("#right__wrap").removeClass("fixed");
      }
    });
  } else {
    // 모바일인 경우 스크립트
    $(function () {
      var stickyHeaderTop = $('#sit_ov_btn').offset().top + $('#sit_ov').height() / 1;
      $(window).scroll(function () {
        if ($(window).scrollTop() > stickyHeaderTop - 50) {
          $('#sit_ov').addClass("fixed");
          $('#sit_ov').removeClass("static");
          $('.gg').height();
        } else {
          $('#sit_ov').removeClass("fixed");
          $('#sit_ov').addClass("static");
        }
      });
      $('.op_btn').click(function () {
        $('.scroll_show').toggle();
      });
      $(".sit_ov_height").css('height', $("#sit_ov").height());
    });
  }
});

 



                       $('#sit_ov').addClass("fixed");
                      $('#sit_ov').removeClass("static");

이 2개 스크립트를 바로 실행하시면 될듯 합니다.

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

회원로그인

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