JQuery 세로 슬라이드 애니메이션이 이동하지 않습니다.

세로로 스크롤 할 때 탐색 모음을 위아래로 슬라이드시키는 JQuery 기능이 있습니다. 아이디어는 항상 클라이언트 윈도우의 상단에서 20 픽셀을 유지하는 것입니다. 사용자가 위 또는 아래로 스크롤 할 때 탐색 막대는 클라이언트 윈도우 상단에서 20 픽셀 뒤로 이동합니다.JQuery 세로 슬라이드 애니메이션이 이동하지 않습니다.

내 문제 : 그냥 피의 움직임을 롤. 나는 무엇을 잘못 했는가?

function moveDistanceEaseIn(/*HTML Element*/ ele, /*int|float*/ dist, /*Function*/ funct) 
{ 
    ele = $(ele); 
    var min = dist*0.01; 

    // kill an already running animation 
    if (ele.data("animInterval")) 
     clearInterval(ele.data("animInterval")); 

    var step = function() 
    { 
     if (dist <= min) 
     { 
     ele.data("animInterval", false); 
     clearInterval(interval); 
     return; 
     } 

     var stepMove = dist*0.1; 
     dist  -= stepMove; 
     funct(ele, dist, stepMove); 
    }; 

    var interval = setInterval(step, 30); 
    ele.data("animInterval", interval); 
} 

function moveToPointEaseIn(/*HTML Element*/ ele, /*int|float*/ curPoint, /*int|float*/ point, /*Function*/ funct, /*bool*/ signed) 
{ 
    ele  = $(ele); 
    var dist = (signed == true) ? curPoint - point:Math.abs(curPoint - point); 
    moveDistanceEaseIn(ele, dist, funct); 
} 

$(document).ready(function() 
{ 
    $(window).scroll(function() 
    { 
     var nav = $("#aa"); 
     moveToPointEaseIn(nav, nav.position().top, $(window).scrollTop()+20, function(ele, dist, stepMove) 
     { 
     ele.css("top", ele.position().top+stepMove); 
     }, true); 
    }); 
});

그리고 몇 가지 예를 들어 HTML : http://jsfiddle.net/wLga8/ 여기

내 코드입니다 : 여기

JQuery와 코드 내 JSFiddle이다 나는 확실하지 않다

<body style="height: 3000px;"> 
    <div id="aa" style="position: absolute; left: 0px; top: 20px; width: 200px; height: 500px; background-color: red;"></div> 
</body>

출처

2011-12-31 Jake M

질문에 코드를 추가했습니다. SO에 관한 질문은 자급 자족해야합니다. 이 경우 다른 사이트가 다운되어 문제를보다 쉽게 검색 할 수 있습니다. –

[이] (http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/)와 같은 의미입니까? [여기있다] (http://jsfiddle.net/dafastestfingers/wLga8/5/) 데모 –

왜 기능 ISN 일하고있어. 바이올린은 jquery를 사용하도록 설정되지 않았지만 설정조차도 효과가 없습니다.

그러나, 이것은 당신이있어 일을 할 것 같다 후 ...., 그것은 당신의 문제를 모두 해결할 수 있는지를

<body style="height: 3000px;"> 

<div id="aa" style="position: absolute; left: 0px; top: 20px; width: 200px; height: 500px; background-color: red;"> 

</div>

var $scrollingDiv = $("#aa"); 
$(window).scroll(function(){    
    $scrollingDiv.stop().animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, 20);    
});

DEMO

출처

2011-12-31 02:56:23 Scott

확실하지하지만 최소한 코드를 디버깅 할 수 있도록 최소한이 코드를 실행해야합니다.

는
당신의 step 기능을 처음 실행하면 (당신이 게시 한에서 누락) 당신의 바이올린에 jQuery 라이브러리를 추가, 값은 음의 값을가집니다 : -100 및 -1. 이에
```
if (dist <= min) 
```
:
이
```
if (Math.abs(dist) <= Math.abs(min)) 
```
애니메이션은 여전히 잘못 보이는 이것은 당신의 <= 테스트 내가이 줄을 변경하여이 문제를 해킹

첫 번째 반복에 애니메이션을 죽일 것을 의미합니다 , 적어도 그것은 애니메이션입니다 :)

여기가 수정 된 바이올린 : http://jsfiddle.net/wLga8/4/

출처

2011-12-31 02:57:29

JQuery 세로 슬라이드 애니메이션이 이동하지 않습니다.

답변

관련 문제