이 js의 여백 상단을 어떻게 건너 뛰 시나요?

저는 이것을 알아 내려고 노력했습니다. 아래로 스크롤하는 동안 .float-div를 위로부터 여백을 두지 않으려면 어떻게해야합니까? 스크롤하는 동안 창 상단에 고정시키고 싶습니다. .top 항목을 삭제하면 정상적으로 작동합니다. 하지만 .top 항목을 삭제하지 않고 어떻게 해결할 수 있습니까?이 js의 여백 상단을 어떻게 건너 뛰 시나요?

http://jsfiddle.net/loktar/Kjc6k/2/

var $scrollingDiv = $(".float-div"); 

$(window).scroll(function(){  
var y = $(this).scrollTop(), 
$postEntry = $('.post-entry'), 
maxY = $postEntry.offset().top + $postEntry.height(), 
scrollHeight = $scrollingDiv.height(); 
if(y< maxY-scrollHeight){ 
$scrollingDiv 
.stop() 
.animate({"marginTop": ($(window).scrollTop()) + "px"}, "slow");   
}  
});

출처

2013-09-28 David

이 나의 새로운 대답이이 바이올린 http://jsfiddle.net/Kjc6k/48/ 희망입니다 당신이 재생 모에 주셔서 감사합니다 @moe :

var $scrollingDiv = $(".float-div"); 


$(window).scroll(function(){ 


var y = $(this).scrollTop(), 
    $topEntry = $('.top-entry').height(); 
if(y > $topEntry){ 
    $scrollingDiv 
    .stop() 
    .animate({"margin-top": y + "px"}, "slow");   
} 
else 
    $scrollingDiv 
    .stop() 
    .animate({"margin-top": "80px"}, "slow"); 
});

출처

2013-09-28 21:53:14

그래도 문제는 없습니다. float-div는 .sep-entry를 스크롤합니다. .sep-entry의 맨 위에 정확하게 멈추고 싶습니다. .float-div의 높이가 600px 인 경우 영원히 스크롤 할 수 있습니다. .float-div에 높이를 300px로 설정하고 아래로 스크롤하십시오. 그럼 내가 무슨 뜻인지 알 겠어! 도와 주셔서 감사합니다! – David

.post-entry에서만 .float-div 스크롤을 원하십니까? –

희망이 도움이 : http://jsfiddle.net/Kjc6k/51/ –

top:0을 추가하기 위해 플로트 DIV 클래스는 쉽게 해결됩니다.

.float-div { 
position: absolute; 
background: red; 
top: 0; 
}

업데이트 바이올린 : http://jsfiddle.net/7KSTs/

출처

2013-09-28 21:18:53

무엇을 찾고 ! 첫 번째 해결 방법은 .float-div를 맨위로 이동 시키지만, "top-entry"아래에 두는 것이 좋습니다. 마지막 솔루션은 훌륭하지만 스크롤에 애니메이션을 넣고 싶습니다. 감사! – David

@ David 나는 여기서 어떤 문제가 있는지 이해하지 못한다. 더 잘 설명해 주시겠습니까? –

문제는 페이지를 아래로 스크롤 할 때 .float-div에 여백이있는 것입니다. .top 항목 아래로 스크롤하거나 지나쳤을 때 창 맨 위에 고정시키고 싶습니다. 당신이 나를 데려 오지 않으면, 단지 다시 말하면 내가 설명하려고 노력할 것입니다. – David

이 js의 여백 상단을 어떻게 건너 뛰 시나요?

답변

관련 문제