창을 스크롤 할 때 컨테이너 내에 요소를 고정하십시오.

Question

이미지를 사용하여 가장 잘 설명 할 수있는 질문이 있으니 첨부 해 드리겠습니다.

좋아, 그래서 기본적으로 내가 가지고있는 부모 컨테이너와 그 안에 요소 우리는 FIXED 요소로 참조합니다 (실제로 텍스트 블록 될 것입니다)입니다.

사용자가 페이지 상단에있을 때 고정 요소가 상위의 상단에 있도록하고 싶습니다. 사용자가 페이지를 아래로 스크롤하기 시작하고 부모가보기 포트를 위로 이동하기 시작하면 고정 요소가 부모의 아래쪽에 도달 할 때까지 스크롤을 따라 가야합니다.

현재이 웹 사이트의 개략적 인 스케치 단계에 있기 때문에 현재 HTML이나 기타 내용이 없습니다.

일반적으로 jQuery 또는 javascript를 사용할 수 있으며 JS 기술은 제한되어 있으며 jQuery에 익숙하지만 코드 복사 및 붙여 넣기에 신경 쓰지 않아도됩니다.

도움이 될 것입니다. 감사!

Answer 1

javascript (jQuery 포함 또는 제외)를 사용하여 요소의 위치를 ​​부모 위치와 절대적으로 변경하려면 부모가 상대 경로 여야합니다. 화면 이동 막대의 위치에 따라 위치를 변경합니다.

이 자습서에서는이를 수행하는 방법에 대해 설명합니다. 어떤 반응 페이지 나 브라우저의 크기를 조정하면, 사이드 바는 중앙 요소가 들어

http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/

Answer 2

. 그래서 당신은 브레이크 포인트를 돌보고 싶을지도 모릅니다. 786을 사용했습니다. 또한 처음에는 div가 맨 위에 위치하지 않을 수 있으므로 코드별로 오프셋을 설정해야합니다.

<script> 
    $().ready(function() { 
     var $scrollingDiv = $("#scrollingDiv"); 
     var $div_top = $scrollingDiv.offset().top; 
     $(window).scroll(function(){ 
      if(window.outerWidth > 786) { 
       var $scroll_top = $(window).scrollTop(); 
       if($scroll_top > $div_top) { 
        $pos = $scroll_top - $div_top; 
        $scrollingDiv 
         .stop() 
         .animate({"top": $pos + "px"}, "slow"); 
       } else if($('#scrollingDiv').offset().top > $div_top) { 
        $scrollingDiv 
         .stop() 
         .animate({"top": "0px"}, "slow"); 
       } 
      } else { 
       $scrollingDiv.css("top", 0); // sidebar became center object 
      } 
     }); 
     $(window).resize(function() { 
      if(window.outerWidth > 786) { 
       var $scroll_top = $(window).scrollTop(); 
       if($scroll_top > $div_top) { 
        $pos = $scroll_top - $div_top; 
        $scrollingDiv 
         .stop() 
         .animate({"top": $pos + "px"}, "slow"); 
       } else if($('#scrollingDiv').offset().top > $div_top) { 
        $scrollingDiv 
         .stop() 
         .animate({"top": "0px"}, "slow"); 
       } 
      } else { 
       $scrollingDiv.css("top", 0); // sidebar became center object 
      } 
     }); 
    }); 
</script>