HTML 페이지에서 200 픽셀 스크롤했을 때 표시되는 "맨 위로 돌아 가기"버튼에서 고정됨 (예 :

Question

) 웹 사이트에서 작업 중이며 고정 위치에 추가 할 수있는 코드가 있는지 궁금합니다. 창 "예를 들어, 방문자가 200 픽셀을 스크롤하면 볼 수있는 항목입니다.

다른 질문에서이 항목을 찾을 수 없습니다.

건배

내 나쁜

, 나는 아마도 이것이 내가 Use jQuery to show a div only when scroll position is between 2 points 찾고 있어요 무엇이 발견했다. 내가 틀렸다면 :-)

Answer 1

j Query를 사용하여 스크롤 위치를 감지 한 다음 스크롤이 이동되면 div를 숨길 수 있습니다. 다음은 예제 코드입니다. 그것을 검토하고 약간 그것에 당신의 요구 사항에 따라 잘 작동하고 있습니다.

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> 
      <script type='text/javascript'>//<![CDATA[ 
      $(window).load(function(){ 
      $(function() { 
       $.fn.scrollBottom = function() { 
        return $(document).height() - this.scrollTop() - this.height(); 
       }; 

       var $el = $('#sidebar>div'); 
       var $window = $(window); 
       var top = $el.parent().position().top; 

       $window.bind("scroll resize", function() { 
        var gap = $window.height() - $el.height() - 10; 
        var visibleFoot = 172 - $window.scrollBottom(); 
        var scrollTop = $window.scrollTop() 

        if (scrollTop < top + 10) { 
         $el.css({ 
          top: (top - scrollTop) + "px", 
          bottom: "auto" 
         }); 
        } else if (visibleFoot > gap) { 
         $el.css({ 
          top: "auto", 
          bottom: visibleFoot + "px" 
         }); 
        } else { 
         $el.css({ 


          //use your css property here if you want to display none a div 
          display: none, 
          bottom: "auto" 



         }); 
        } 
       }).scroll(); 
      }); 
      });//]]> 

      </script>