限制固定div垂直滚动

时间:2012-09-14 21:05:27

标签: javascript jquery css html height

我有2列布局,左侧是固定侧边栏,右侧列是页面内容。我也有页脚。我希望我的固定侧边栏向右滚动到页面内容div结尾的坐标。

但是,如果侧边栏的高度大于页面内容的高度,我需要自动为页面内容div指定新的高度。此代码适用于第一种情况(内容高于侧边栏),但第二种情况仅适用于我再次加载页面一次(例如,当我从另一页面转到此类页面时,脚本不指定新的高度,但当我重新加载页面时,确实如此)

这是代码:

 $(window).load(function(){
   var windw = this;
   var contentHeight = $('#content').height(); // fetch Сontent div height
   var sideHeight = $('.sidebar-nav-fixed').height(); // fetch sidebar div height
   $.fn.followTo = function ( pos ) {
       var $this = this,
           $window = $(windw);

       $window.scroll(function(e){
           if ($window.scrollTop() >= pos) {
               $this.css({
                   position: 'absolute',
                   top: pos
               });
           } else {
               $this.css({
                   position: 'fixed',
                   top: 100
               });
           }
       });
   };

if (sideHeight > contentHeight) {
   $('#content').css ({
   height: contentHeight + (sideHeight - contentHeight)
 }),
   contentHeight = $('#content').height() // Assign a new height to page content div
}
  $('.sidebar-nav-fixed').followTo(contentHeight - sideHeight);

});

如果你有任何想法,我会很高兴的 谢谢!

1 个答案:

答案 0 :(得分:0)

看起来我解决了这个问题。 在我的侧边栏中,我有一个动态加载的facebook小部件,所以当我打开页面时,脚本在没有Facebook div高度的情况下获取高度,因为它还没有加载。在加载facebook小部件后,我只是做了很少的操作来加载滚动脚本。

甚至更好的方法 - 将此小部件放入容器并在css中手动指定高度。