끈적 div 고정 위치

Question

여기 내 HTML 작품입니다. http://jsfiddle.net/awaises/remqf/4/

고정 된 div 상자를 화면 맨 아래로 밀기를 원합니다. 그러나 그것은 네비게이션의 왼쪽 네비게이션과 겹쳐서 네비게이션의 마지막 항목은 녹색 상자 뒤에 숨어 있습니다. 다음 디자인에 따라 초록색 상자를 고칠 수 있습니까? 그러나 우리는 창의 크기가 작거나 큰 경우에도 녹색 상자가 화면 하단에 있어야한다는 것을 확인해야합니다.

는 디자인 레이아웃은 http://www.thewebmakerz.com/screen.jpg

Answer 1

이 .left-col{ height:500px;}가 문제를 해결 하는가 URL?

Answer 2

this fiddle을 참조하십시오.

세 가지 핵심 팁 : 다음 메뉴의 내용 ("왼쪽-COL-최고"라고 함) 다른 상위에

1. 넣어 "왼쪽 바닥 글".
2. "left-col-top"은 투명해야하며 "z-index : 1"및 메뉴보다 큰 최소 높이가있는 "position : fixed"이어야합니다.
3. "왼쪽 하단"은 "위치 : 절대"여야합니다.

Answer 3

화면 1.1을 보면, 노란색 상자에 11 번째 목록이 있으면 녹색 상자 뒤에 분명히 갈 것입니다. 브라우저의 툴바/메뉴 막대도 고려하십시오. 화면 높이가 낮은 경우 "More Links>"와 같은 것을 사용해야 할 수도 있습니다.

화면 1.2 이상 jQuery가 옵션 인 경우 scrollTop 기능을 사용할 수 있습니다. 처음에는 초록색 상자를 고정 된 위치로 고정시키고 바닥에서 약간의 여백을 음영으로 놓습니다. 그럼 (화면 120에서와 같이) 특정 양을 사용자가 스크롤은 다음 jQuery 코드하려고하면 좌측 네비게이션 아이템은 관리자에 의해 제어되기 때문에

var yellowBoxHeight = $("div.yellow-box").height(); 
$document.scroll(function() { 
    if ($document.scrollTop() >= yellowBoxHeight - 100) { 
    // If user has scrolled some amount, eg. 100 pixels of yellow box is still visible 
    // make the green box animate & let it come upwards 
    } else { 
    // put the green-box back with some negative margin into the bottom 
    } 
});