제발 부탁하십시오 : 스크롤을 따라 가면서 끈적 거리십시오.

나는 무엇을하려했는지 성취했습니다. 빨리 스크롤하면 요소가 잠시 동안 보이지 않게되고 스크롤을 원래 위치로 되돌립니다. 여기에 첫 번째 바이올린이 있습니다. http://jsfiddle.net/s4Tsy/제발 부탁하십시오 : 스크롤을 따라 가면서 끈적 거리십시오.

나는 또한 요소를 맨 위에 붙이기 위해 성취했습니다. 빨리 스크롤하면 절대로 눈에 띄지 않게됩니다. 여기에 바이올린이 있습니다. http://jsfiddle.net/aRnAe/

내 질문 : 더 우아하게 할 수 있습니까? 이 코드는 확실하지 않습니다. 나는 초보자이며 배우기를 원합니다.

$(document).ready(function(){ 
    var el=$('#scrolldiv'); 
    var originalelpos = el.offset().top; 
    var scrolltimer; 
    //run on scroll 
    $(window).scroll(function(){ 
     var el=$('#scrolldiv'); // important! (local) 
     var windowpos = $(window).scrollTop(); 
     var currentpos = el.offset().top; 
     if(windowpos>=currentpos) 
     { 
      el.addClass('scrollfixed'); 
     } 
     else 
     { 
      var finaldestination = windowpos+originalelpos; 
      el.stop().animate({'top':finaldestination},2500); 
     } 
     clearTimeout(scrolltimer); 
     scrolltimer = setTimeout(afterScroll, 100); 
    }); 
    function afterScroll() { 
     currentpos = el.offset().top; 
     windowpos = $(window).scrollTop(); 
     if (currentpos <= windowpos) {  
      el.removeClass('scrollfixed'); 
      el.css({top: windowpos }); 
      finaldestination = windowpos+originalelpos; 
      el.stop().animate({'top':finaldestination},1000); 
     } 
    } 
});

종류와 관련, 스테판

출처

2013-06-18 user2496130

사용자가 빠르게 위로 스크롤하고 scrolldiv가 보이지 않을 경우 다른 조건을 추가해야합니다. 사용자의 scrolltimer가 정의되지 않았으므로 첫 번째 스크롤에 대한 경고가 표시되고 사용자가이를 지우려고 할 때 비어있는 function timeout 또는 if (v == false)가 최초 일 때 true로 변경하고 if true 상태에서만 clear로 변경하는 것과 같이 처음으로 플래그를 추가하십시오. 감사합니다. – CME64

감사합니다. 나는 정의되지 않은 타이머의 클리어를 수정했다. 하지만 내가 뭘하려고하면 div를 아래쪽에 붙들어 두 번째 조건이 작동하지 않습니다. 나는 (currentpos> = $ (window) .scrollTop() + $ (window) .height() - el.height())하지만 올바른 클래스를 적용 할 수 없습니다. – user2496130

여기, http://jsfiddle.net/CME64/aRnAe/1/ ,, div의 하단이 페이지의 맨 아래에 정확하게 있지 않다는 것을 눈치 채실 수 있으면 클래스 itslef 때문입니다. , 나는 적어도 아직도 당신이 그것의 시력을 잃을 수 없다고 생각합니다. :) – CME64

다음은 결과입니다.

>> A jsfiddle of the code below

나는 코드가 괜찮다는 것을 그것을 위해 CME64의 말을.

스크립트

$(document).ready(function(){ 
    var el = $('#scrolldiv'); 
    var originalelpos = el.offset().top; 
    var scrolltimer; 
    //run on scroll 
    $(window).scroll(function() { 
     var windowpos = $(window).scrollTop(); 
     var currentpos = el.offset().top; 
     if (windowpos >= currentpos) { 
      el.addClass('scrollfixed'); 
     } else if(currentpos >= $(window).scrollTop() + $(window).height() - el.height()){ 
      el.addClass('scrollfixedBtm'); 
     }else{ 
      var finaldestination = windowpos + originalelpos; 
      el.stop().animate({ 
       'top': finaldestination 
      }, 500); 
     } 
     clearTimeout(scrolltimer); 
     scrolltimer = setTimeout(afterScroll, 100); 
    }); 

    function afterScroll() { 
     currentpos = el.offset().top; 
     windowpos = $(window).scrollTop(); 
     if (currentpos <= windowpos) { 
      el.removeClass('scrollfixed'); 
      el.css({ 
       top: windowpos 
      }); 
      finaldestination = windowpos + originalelpos; 
      el.stop().animate({ 
       'top': finaldestination 
      }, 500); 
     }else if (currentpos >= $(window).scrollTop() + $(window).height() - el.height()){ 
      el.removeClass('scrollfixedBtm'); 
      el.css({ 
       top: (windowpos+$(window).height()-el.height()) 
      }); 
      finaldestination = windowpos + originalelpos; 
      el.stop().animate({ 
       'top': finaldestination 
      }, 500); 
     } 
    } 
});

CSS

.scrollfixed { 
    position: fixed !important; 
    top: 0px !important; 
} 
.scrollfixedBtm { 
    position: fixed !important; 
    top: 90% !important; 
} 
#scrolldiv { 
    position: absolute; 
    height: 100px; 
    width: 30px; 
    background-color: #f00; 
    left:0; 
    top: 100px; 
}

* HTML * (긴 스크롤 페이지에서만 볼 수 물론 효과)

<div id="scrolldiv"></div>

출처

2013-06-19 06:57:00 user2496130

제발 부탁하십시오 : 스크롤을 따라 가면서 끈적 거리십시오.

답변

관련 문제