페이지를 스크롤하는 동안 div 패널이 창의 맨 위에 도달하는 방법을 고정하는 방법

Question

페이지를 아래로 스크롤하면 패널의 모든 블록을 포함하여 오른쪽/왼쪽 패널도 위로 이동합니다. 일부 웹 사이트에는 웹 사이트 상단에 도달 한 후 오른쪽 또는 왼쪽 패널의 한 블록이 정지되어 더 이상 올라가지 않는 기능이 있습니다. 그것은 CSS 또는 무엇을 사용하여 완료됩니까? 예는 Gmail입니다. Gmail에서 긴 대화를 열고 위아래로 스크롤하여 올바른 패널을 확인하십시오. 또한 페이지를 스크롤 할 때 이메일 대화 상단에있는 버튼을 확인하십시오.

Answer 1

실제로 저는 페이지의 작은 JS 조각을 통해이를 수행했습니다. 결정적인 예는 여기에서 찾을 수 있습니다 http://viralpatel.net/blogs/scroll-fix-header-jquery-facebook/ 고정하려는 패널이 페이지 상단에 도달하면 일반적으로 position:fixed CSS 스타일을 동적으로 적용해야합니다. JQuery와 그 나는 사람이 JS하지 않고 일반 CSS에 동일한 기능을 만들어 들었하지 않은 scroll 이벤트

var rightpane = $('#rightpane'); 

// this gets the top offset of the div on the document 
var start = $(rightpane).offset().top; 

$.event.add(window, "scroll", function() { 

// the number of pixels that are hidden from view above the scrollable area 
    var p = $(window).scrollTop(); 

    $(rightpane).css('position',((p)>start) ? 'fixed' : ''); 

    // at the top of the screen (0 px offset) if scrolled 
    $(rightpane).css('top',((p)>start) ? '0px' : ''); 
}); 

의 핸들러를 제공하는 당신을 도와줍니다

이와 같은

Answer 2

예 ... 당신은 그것을 할 수있는 position:fixed;

Look this link

Answer 3

예를 쉽게 할 것을 CSS 기능 위치를 사용하여 : 상단을 사용하여 해당 블록의 위치를 ​​설정 또한 고정 또는 하단 : 0 픽셀 및 왼쪽 또는 오른쪽 0px :

<div id="float_bar"></div> 

#float_bar{position:fixed;right:0px;top:10px} 

오른쪽 및 상단 accordignly ur 요구 사항을 설정할 수 있습니다.

Answer 4

원하는 기능은 자바 스크립트가 필요합니다. Drupal에서이 기능은 플로팅 블록 모듈을 설치하여 구현할 수 있습니다. http://drupal.org/project/floating_block