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

form위에 fixed로 띄운 창이 가면 사라졌다 나타나게 하고싶어요 채택완료

morrie 5년 전 조회 893
답변 1
목록

pc기준으로 높이 4천~5천 사이에 <div id="mct_07> 이라는 이름을 가진 form이 있습니다
4천~5천 사이에 즉 form위에 fixed로 띄워논 div가 위치하게 되면 fadeout으로 사라지게 하고 form 영역을 벗어나면 fadein으로 나타나게 하고 싶어요

높이값 4천을 줘서 4천 이상에서는 보이게 4천 이하에서는 사라지게는 했는데 특정구역에서 사라지게 하고 그 외의 영역에서는 보이게 하고싶은데 어떻게 바꿔야 하는지 시도를 계속 하고있는데 해결이 안되네요

그리고 아래 코드도 pc에서는 작동을 하는데 모바일에서는 작동을 안하는데 높이가 달라서 그런가요?
그렇다면 모바일에서도 작동시키려면 어떻게 해야해요?

[ ▼ 질문관련 참고 Source ]

1

2

3

4

5

6

7

8

9

10

11

12

<script>

    $(function() {

        $(window).scroll(function () {

            var scroll_height = $(document).scrollTop();

            if ( 4000 <= scroll_height) {

                $("#quick").fadeOut();

            } else {

                $("#quick").fadeIn();

            }

        });

    });

</script>
#fadein #fadeout
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
검은냥냥이

해당 엘리먼트를 상단 높이에서 절대위치를 구한다음에 처리하면 될것 같아요.

</span></span></p>

<p><span style="font-size:10pt;"><span style="font-family:맑은 고딕;"><code>$(</code><code>function</code><code>() {</code></span></span></p>

<p><span style="font-size:10pt;"><span style="font-family:맑은 고딕;"><code>  $(window).scroll(</code><code>function</code> <code>() {</code></span></span></p>

<p><span style="font-size:10pt;"><span style="font-family:맑은 고딕;"><code>    var</code> <code>scroll_height = $(document).scrollTop();</code></span></span></p>

<p><font face="monospace"><span style="font-size: 13.3333px;">    var mct_07 = $("#mct_07").offset().top;</span></font></p>

<p> </p>

<p><span style="font-size:10pt;"><span style="font-family:맑은 고딕;"><code>    if</code> <code>(mct_07 >= 4000) {</code></span></span></p>

<p><span style="font-size:10pt;"><span style="font-family:맑은 고딕;"><code>      $(</code><code>"#quick"</code><code>).fadeIn();</code></span></span></p>

<p><span style="font-size:10pt;"><span style="font-family:맑은 고딕;"><code>      return false;</code></span></span></p>

<p><span style="font-size:10pt;"><span style="font-family:맑은 고딕;"><code>    }</code></span></span></p>

<p> </p>

<p><span style="font-size:10pt;"><span style="font-family:맑은 고딕;"><code>    $(</code><code>"#quick"</code><code>).fadeOut();</code></span></span></p>

<p><span style="font-size:10pt;"><span style="font-family:맑은 고딕;"><code>  });</code></span></span></p>

<p><span style="font-size:10pt;"><span style="font-family:맑은 고딕;"><code>});</code></span></span></p>

<p><span style="font-size:10pt;"><span style="font-family:맑은 고딕;">

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

m
morrie
5년 전
답변 감사합니다~

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

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

로그인