2013-05-03 1 views
0

그래서 페이지 위로 스크롤하거나 페이지의 위치에 따라 페이지 (onClick)를 아래로 스크롤하는 끈적 div를 만들려고합니다.jquery 웨이 포인트와 함께 끈적 요소를 얻으려고

나는 얼마 동안 코드를 수정하여 마술 수식을 얻을 수 없다.

내가에서 플러그인을 사용하고 있습니다 : http://imakewebthings.com/jquery-waypoints/#get-startedhttp://archive.plugins.jquery.com/project/ScrollTo

코드는 여기에있다.

<head> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
    <script src="http://s199881165.onlinehome.us/transfem/scripts/jquery.cookie.js"></script> 
    <script src="http://s199881165.onlinehome.us/transfem/scripts/jquery.scrollTo-1.4.3.1-min.js"></script> 
    <script src="http://s199881165.onlinehome.us/transfem/newlayout/script/waypoints.min.js"></script> 
    <script src="http://s199881165.onlinehome.us/transfem/newlayout/script/waypoints-sticky.min.js"></script> 
</head> 

...

<script> 


$(function() {      // When the page has loaded, 
    $('.tabbycat').waypoint(    // create a waypoint 
    function() { 

     $('#tabtabtab').removeClass('tabbycat', 1, 'linear'); 
     $('#tabtabtab').addClass('stuck', 1, 'linear'); 


    } 
) 
}); 

$(function() {      // When the page has loaded, 
    $('.top').waypoint(    // create a waypoint 
    function() { 

     $('#tabtabtab').removeClass('stuck', 1, 'linear'); 
     $('#tabtabtab').addClass('tabbycat', 1, 'linear'); 

    } 
) 
}); 

var itsthis = document.getElementsByClassName('tabbycat'); 
var thistoo = document.getElementsByClassName('stuck'); 

$(itsthis).onClick(function(){ 
$(window).scrollTo({top:'1px', left:'1px'}, 300); 
}); 


$(thistoo).onClick(function(){ 
$(window).scrollTo({top:'339px', left:'1px'}, 300); 
}); 


</script> 

탈리 호!

답변

0

데모를 확인을 사용하고 내가 말을해야, Stickyfloat가 스크롤 할 때마다 새로 고침, 그래서 우리가 볼 수있는 밀리 초의 지연이 있습니다. (배경에 스크립트를 적용 할 때 매우 짜증납니다.) 그래서이 레이어의 CSS 속성을 Fixed로 설정하면 preffer로 설정됩니다. e 레이어의 위치 높이이므로 스크롤을 계속하면 새로 고침하지 않습니다.

http://stickyjs.com/

유일한 단점은 (당신이하는 것이 필요한 경우) 상위 바닥에 도달하면 당신이 효과를 막을 수 없다는 것입니다. 어쩌면 조정할 수 있습니다.