창 상단에서 고정 된 div의 스크롤링 오프셋 추적

Question

고정 된 탐색 막대가있는 긴 1page 웹 페이지가 있습니다.

이 탐색 바를 사용하여 해당 .offset().top을 추적하고 싶습니다. 따라서 창 상단의 오프셋을 기준으로 클래스를 추가하거나 제거 할 수 있습니다.

예

Live code link

(이 내 논리입니다하지만 난 jQuery를 경고도 작동 할 수 없습니다.

$(window).scroll(function() { 
    var elem = $('.navigation'); 
    var topValue = offset.top; 
    if (topValue > 400) { 
    alert(topValue); 
    } 
}); 

Answer 1

jQuery Waypoints을보십시오. 대신 오프셋을 지정하는, 당신이 당신의 페이지의 요소를 사용 전화가 올 때마다 콜백을 트리거합니다.

$(function() { 
    $("#map").waypoint(function() { 
    alert("Scrolled to #map"); 
    }); 
}); 

편집 : 제대로 질문에 대답하는 그러나

, 당신의 탐색은 항상 때문에 position: fixed 위치하여 요소의 상대적 뷰포트가 아닌 페이지에 같은 위치에있을 것입니다. 당신이 웨이 포인트없이이 작업을 수행하려면, 단지 확인 body 태그의 scrollTop :

$(function() { 
    $(window).scroll(function() { 
    var offset = $("body").scrollTop(); 
    if (offset > 400) 
     alert("Scrolled to 400"); 
    }); 
}); 

Answer 2

코드와 문제는 offset.top을 사용하는 것입니다,하지만 당신은 .top는 반환하지 않습니다 것을 의미 선언에는 offset 변수가 없습니다 아무것도.

offset()에 대한 jQuery 설명서를 보았지만 예제를 제대로 이해/읽지 못했던 것 같습니다. ,

---

alert(" coordinates: (" + offset.left + ", " + offset.top + ") "); 

가 귀하의 링크에서 웹 페이지를 보면 : 문서에서

, 그들은 변수 초기화됩니다

var offset = $(this).offset(); 

을 그리고 다음 .top 및 .left 값을 추출 사용자가 스크롤 한 양을 확인하기 위해 매우 광범위한 스크립트가 필요하지 않습니다. 이 작은 함수는 필요한 것을 제공합니다 :

이것을 참조하십시오 working Fiddle 예! 이것에 대해

// getPageScroll() by quirksmode.com 
function getPageScroll() { 
    var xScroll, yScroll; 
    if (self.pageYOffset) { 
     yScroll = self.pageYOffset; 
     xScroll = self.pageXOffset; 
    } else if (document.documentElement && document.documentElement.scrollTop) { 
     yScroll = document.documentElement.scrollTop; 
     xScroll = document.documentElement.scrollLeft; 
    } else if (document.body) {// all other Explorers 
     yScroll = document.body.scrollTop; 
     xScroll = document.body.scrollLeft; 
    } 
    return new Array(xScroll,yScroll) 
} 

더 읽기는 this stackoverflow answer에서 찾을 수 있습니다.