[JQUERY] 800 픽셀을 한 후 스크롤 아래에 DIV보기

800 픽셀을 한 후 스크롤 아래에 DIV보기

해결법

1. ---

   1.당신은 픽셀의 수를 스크롤 한 후 사업부를 표시 할 경우 :

   당신은 픽셀의 수를 스크롤 한 후 사업부를 표시 할 경우 :

   작업 예

   $(document).scroll(function() {
     var y = $(this).scrollTop();
     if (y > 800) {
       $('.bottomMenu').fadeIn();
     } else {
       $('.bottomMenu').fadeOut();
     }
   });
   

   $ (문서) .scroll (함수 () { VAR y를 $ (이)를 .scrollTop () =; 경우 (Y> 800) { ( '. bottomMenu')를 $ fadeIn ()를.; } 다른 { ( '. bottomMenu')를 $ 페이드 아웃을 ().; } }); 몸 { 높이 : 49 픽셀; } .bottomMenu { 표시 : 없음; 위치 : 고정; 바닥 : 0; 폭 : 100 %; 높이 : 60 픽셀; 국경 정상 : 1 x 1 픽셀 고체 # 000; 배경 : 빨간색; Z- 색인 : 1; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

   스크롤 아래로 ...

   그것의 간단하지만 효과적인.

   .scroll에 대한 설명서 () .scrollTop에 대한 설명서 ()

   당신은 픽셀의 수를 스크롤 한 후 사업부를 표시 할 경우,

   작업 예

   myID = document.getElementById("myID");
   
   var myScrollFunc = function() {
     var y = window.scrollY;
     if (y >= 800) {
       myID.className = "bottomMenu show"
     } else {
       myID.className = "bottomMenu hide"
     }
   };
   
   window.addEventListener("scroll", myScrollFunc);
   

   MYID = document.getElementById를 ( "MYID"); VAR myScrollFunc = 함수 () { VAR y를 window.scrollY를 =; 경우 (Y> = 800) { myID.className는 "bottomMenu 쇼"= } 다른 { myID.className는 "bottomMenu 숨기기"= } }; window.addEventListener ( "스크롤"myScrollFunc); 몸 { 높이 : 2000px; } .bottomMenu { 위치 : 고정; 바닥 : 0; 폭 : 100 %; 높이 : 60 픽셀; 국경 정상 : 1 x 1 픽셀 고체 # 000; 배경 : 빨간색; Z- 색인 : 1; 전환 : 모두 1; } .hide { 불투명도 : 0; 왼쪽 : -100 %; } .보여 주다 { 불투명도 : 1; 왼쪽 : 0; }

   .scrollY에 대한 문서 .ClassName과에 대한 문서 .addEventListener에 대한 문서

   당신은 스크롤 한 후 요소를 표시 할 경우 :

   작업 예

   $('h1').each(function () {
       var y = $(document).scrollTop();
       var t = $(this).parent().offset().top;
       if (y > t) {
           $(this).fadeIn();
       } else {
           $(this).fadeOut();
       }
   });
   

   $ (문서) .scroll (함수 () { 사용자가 스크롤의 800 픽셀 후 // 표시 요소 VAR y를 $ (이)를 .scrollTop () =; 경우 (Y> 800) { ( '. bottomMenu')를 $ fadeIn ()를.; } 다른 { ( '. bottomMenu')를 $ 페이드 아웃을 ().; } 사용자가 스크롤 과거 후 // 표시 요소 // 부모의 위쪽 가장자리 $ ( 'H1'). 각 (함수 () { .. VAR t = $ (이) .parent () 오프셋 (offset) 위쪽; 경우 (Y> t) { () (이) .fadeIn $; } 다른 { () (이) .fadeOut $; } }); }); 몸 { 높이 : 49 픽셀; } .bottomMenu { 표시 : 없음; 위치 : 고정; 바닥 : 0; 폭 : 100 %; 높이 : 60 픽셀; 국경 정상 : 1 x 1 픽셀 고체 # 000; 배경 : 빨간색; Z- 색인 : 1; } .scrollPast { 폭 : 100 %; 높이 : 150 픽셀; 배경 : 파란색; 위치 : 상대; 상단 : 50 픽셀; 여백 : 20 픽셀 0; } H1 { 표시 : 없음; 위치 : 절대; 바닥 : 0; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

   아래로 스크롤 ...

   당신이 내 부모 로 스크롤 할 때

   나는 페이드

   당신이 내 부모 로 스크롤 할 때

   나는 페이드

   당신이 내 부모 로 스크롤 할 때

   나는 페이드

   나는 당신이 800 픽셀 과거 스크롤 할 때 페이드

   아무도는 대신 요소의 부모의 오프셋 (offset) 잡아 없습니다 ;, : 디스플레이 설정 요소의 오프셋을 얻을 수 없습니다.

   .each에 대한 설명서 () .parent에 대한 설명서 () .offset에 대한 설명서 ()

   당신은 탐색 또는 사업부 스틱이 있거나 당신이 그것을하고 백업 스크롤 나침반을 보정 /의 도킹으로 스크롤하면 페이지 상단에 고정하려면 :

   작업 예

   $(document).scroll(function () {
       //stick nav to top of page
       var y = $(this).scrollTop();
       var navWrap = $('#navWrap').offset().top;
       if (y > navWrap) {
           $('nav').addClass('sticky');
       } else {
           $('nav').removeClass('sticky');
       }
   });
   
   #navWrap {
       height:70px
   }
   nav {
       height: 70px;
       background:gray;
   }
   .sticky {
       position: fixed;
       top:0;
   }
   

   $ (문서) .scroll (함수 () { 페이지의 상단에 // 스틱 탐색 VAR y를 $ (이)를 .scrollTop () =; navWrap var에 = $ ( '# navWrap') (오프셋) 최고..; 경우 (Y> navWrap) { $ ( '탐색') AddClass ( '끈적.'); } 그밖에 { $ ( '탐색') RemoveClass ( '끈적.'); } }); 몸 { 높이 : 49 픽셀; 여백 : 0; } {#navWrap 높이 : 70 픽셀 } {탐색 높이 : 70 픽셀; 검정색; } {.어려운 위치 : 고정; 최고 : 0; } H1 { 여백 : 0; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

   HP 자체가 뇌의 바이러스 지옥 릭 그라 임스의 나쁜에서 백업 할 수 있습니다. 육체는 육중 애니메이션 시체를 찾고. 두뇌는 질병이나 잘못을, 높은? 협곡 omero 언데드 종말 생존자는 재미 있었다. 죽은 영혼의이 어리석은 생물, 실제로, 악은 삶의 자신의 뇌를 먹는 dentevil 쇼 도착 저항을 스토킹. 그는 끔찍한 좀비로, 시체, 크리켓 방망이 최대 Brucks의 발전을 움직이는 사람. 부두의 사제 살 먹는, 죽은 고기를 먹는 바이러스. 단지해진위한 존부 그들의 눈은 뇌에, 하늘을 죽은 가자. 뇌는 언데드 좀비 모르겠어요. 나쁜 부패 부두 공포로. ELIVS의 ingdead tofth 근처. <탐색>

   당신이 아래로 스크롤 상단과 1 개 스틱 당신이 내 원래의 위치까지 스크롤 할 때 나침반을 보정

   HP 자체가 뇌의 바이러스 지옥 릭 그라 임스의 나쁜에서 백업 할 수 있습니다. 육체는 육중 애니메이션 시체를 찾고. 두뇌는 질병이나 잘못을, 높은? 협곡 omero 언데드 종말 생존자는 재미 있었다. 죽은 영혼의이 어리석은 생물, 실제로, 악은 삶의 자신의 뇌를 먹는 dentevil 쇼 도착 저항을 스토킹. 그는 끔찍한 좀비로, 시체, 크리켓 방망이 최대 Brucks의 발전을 움직이는 사람. 부두의 사제 살 먹는, 죽은 고기를 먹는 바이러스. 단지해진위한 존부 그들의 눈은 뇌에, 하늘을 죽은 가자. 뇌는 언데드 좀비 모르겠어요. 나쁜 부패 부두 공포로. ELIVS의 ingdead tofth 근처.

2. ---

   2.당신은 거기에가는 몇 가지있어. 하나, 왜 클래스? 당신은 실제로 페이지에 이러한 여러 있습니까? CSS는 당신이 할 수없는 제안합니다. 당신이 ID를 사용해야하지 않는 경우 - 그것은 CSS와 jQuery를 모두를 선택 빠르다 :

   당신은 거기에가는 몇 가지있어. 하나, 왜 클래스? 당신은 실제로 페이지에 이러한 여러 있습니까? CSS는 당신이 할 수없는 제안합니다. 당신이 ID를 사용해야하지 않는 경우 - 그것은 CSS와 jQuery를 모두를 선택 빠르다 :

   <div id=bottomMenu>You read it all.</div>
   

   Z- 인덱스는 단지 픽셀 단위로 측정하지 수, 있어야하는데, 특히 - 두 번째 당신은 CSS에 어떤 일이 일어나고 몇 미친 일이있어. 각각의 더 높은 개수 가까운 사용자 인 경우,이 태그는 켜져 층 (이하, Z의 인덱스 / 흡장 태그 위에 다른 말로하자면)을 지정.

   당신이하려고하는 애니메이션은 기본적으로 .fadeIn (), 그래서 그냥 디스플레이 사업부 설정입니다 : 없음; 초기에 사용 .fadeIn ()을 애니메이션 :

   $('#bottomMenu').fadeIn(2000);
   

   .fadeIn ()을 제하고 표시하여 작동 (적절한 디스플레이 속성은 태그 무엇이든), 투명도 : 0, 서서히 투명도를 래 치트.

   전체 작업 예 :

   http://jsfiddle.net/b9chris/sMyfT/

   CSS :

   #bottomMenu {
       display: none;
       position: fixed;
       left: 0; bottom: 0;
       width: 100%; height: 60px;
       border-top: 1px solid #000;
       background: #fff;
       z-index: 1;
   }
   

   JS :

   var $win = $(window);
   
   function checkScroll() {
       if ($win.scrollTop() > 100) {
           $win.off('scroll', checkScroll);
           $('#bottomMenu').fadeIn(2000);
       }
   }
   
   $win.scroll(checkScroll);
   

3. ---

   3.또한,이 작업을 수행 할 수 있습니다.

   또한,이 작업을 수행 할 수 있습니다.

   $(window).on("scroll", function () {
      if ($(this).scrollTop() > 800) {
         #code here
      } else {
         #code here
      }
   });
   

4. ---

   4.스크롤바 & $ (창) .scrollTop ()

   스크롤바 & $ (창) .scrollTop ()

   스크롤바가 실제로 표시 및 운영 때만 성공 - 내가 발견 한 것은 다행히도 위에 제공되는 솔루션 등의 기능을 호출, (모든 일이 잘이 포럼에 걸쳐이의 더 많은 사례가있다)이다.

   (I 어쩌면 어리석은 시도로) 경우에는 이러한 기능을 구현하려면, 당신은 또한, 우리가 말할 것이다,, 등이 논의에서와 같은 스크롤바의 무료 미니멀 "깨끗한 화면"을 구현 한 후 $ (창)하고 싶습니다. scrollTop ()이 작동하지 않습니다.

   그것은 프로그래밍 기초가 될,하지만이 아웃 파악 긴 시간을 보냈다 나는이 모든 동료 초보자에 머리를 제공 할 거라고 생각 할 수 있습니다.

   좀 더 통찰력을이를 극복하거나하는 방법에 관해서는 사람이 몇 가지 조언을 제공 할 수 있다면 내가 보여 의존했던대로, 회신 해 / 숨기기는 onMouseover와 / 대신 여기하는 MouseLeave

   라이브 길고 프로그램, CollyG.

from https://stackoverflow.com/questions/15798360/show-div-on-scrolldown-after-800px by cc-by-sa and MIT license