Jquery Scrolling Div가 페이지 하단에서 콘텐츠를 푸시합니다.

Question

페이지를 스크롤하는 div를 얻으려고합니다. 그것은 꽤 잘 작동하지만 난 너무 멀리 스크롤 할 때 사업부는 페이지 하단에 붙어지고 : 나는 다시 페이지 위로 스크롤 할 때 다시 시작하는 방법에

$(function() { 
    var $sidebar = $("#sidebar"), 
     $bigPics = $("#bigPics"), 
     $window = $(window), 
     offset = $sidebar.offset(), 
     topPadding = 20, 
     turnoff = 1; 
    var documentHeight = $(document).height(); 

    $window.scroll(function() { 
     if (($window.scrollTop() > offset.top) && (documentHeight - 1200 > parseFloat($sidebar.css("marginTop")))) { 
      $sidebar.stop().animate({ 
       marginTop: $window.scrollTop() - offset.top + topPadding 
      }); 
     } else { 
      $sidebar.stop(); 
     } 
    }); 
}); 

어떤 아이디어? 사전에 건배

Answer 1

사용 : 당신은 오래된 브라우저가있는 경우 결정에 클래스 ".oldBrowser를 추가 할 필요가

.sidebar{ 
position:fixed; 
bottom:0; 
right:0; 
} 

/* for browser not supporting fixed position as ie6 */ 
.oldBrowser .sidebar{ 
position:absolute; 
top:expression(documentElement.scrollTop + body.scrollTop + yourExtraValue); 
} 

:

$sidebar.css({'position':'absolute','top':0,'right':0}); 
var extraValue=0,sidebarHeight=$sidebar.height(); 
$window.scroll(function() { 
    $sidebar.stop(true,true).animate({ 
     top: $window.scrollTop() + $window.height() - sidebarHeight + extraValue 
    }); 
}); 

쉽게 CSS를 사용하여이를 달성 할 수 body 태그 요소. 문서가 준비되면 서버 측 또는 클라이언트 측에서 처리 할 수 ​​있습니다.

Answer 2

jquery 플러그인을 사용했습니다.

https://github.com/garand/sticky

516,는 하단 정지 :

(함수 ($) {

var limit_bottom=$('#footer').height(); 
$('.product-box').sticky({topSpacing:0, bottomSpacing:limit_bottom}); 

}) (jQuery를);