웨이 포인트를 사용하여 위쪽 창에서 고정 점 div 오프셋

Question

누군가가 친절하게 도움을 줄 수 있기를 바랍니다. 나는 프로그래머가 아니며 평범한 것보다 약간 다른 끈적 끈적한 div를 만드는 법을 배우려고합니다. 이것은 내가 달성하고자하는 것입니다 :

• 하는 사업부의 #projectwrapper의 화면 위로 스크롤하고, 창 상단에서 150 픽셀이며, 그것은 스틱이 유지해야 할 때 잠시 페이지 스크롤의 나머지
• 페이지를 다시 아래로 스크롤 할 때 div가 해당 페이지의 정상 위치로 돌아와야 볼 수 있습니다.

나는 데모와 예제를 시도해 왔으며 거의 ​​작동시킬 수 있습니다. 그러나 창문의 맨 위에 올 때만 활성화되며, 맨 위에 고정됩니다. 그러나 나는 정상에서 150px 일어날 활성화와 고집을해야합니다.

이것은 내가 지금까지 가지고있는 것입니다.

$(document).ready(function() { 
$('#projectwrapper').waypoint(function(event, direction) { 
}, { 
    offset: 150 
}).find('#projectdescription').waypoint(function(event, direction){ 
    $(this).parent().toggleClass('sticky', direction === "down"); 
    event.stopPropagation(); 
}); 
}); 

Answer 1

나는 웨이 포인트를 사용하지 않았습니다.

var projectWrapperPosition = $('#projectwrapper').position().top; //div position 
    $(window).scroll(function() { //when window scrolls 
    if($(window).scrollTop() > (projectWrapperPosition - 150)) //check if position of the window is 150px or smaller than the position of specified div has 
    $('#projectwrapper').addClass('change-position'); //.change-position position fixed the div 
    else 
     $('#projectwrapper').removeClass('change-position'); 

    }); 

CSS :

.change-position { 
    top:150px; 
    position:fixed; 
    width:100%; 
    background:red; 
} 

확인 데모 :http://jsbin.com/uxizab/2/ (효과를보기 위해 스크롤)

당신은 몇 가지 간단한 jQuery를 사용하여 수행 할 수 있습니다