高级jQuery粘性边栏

Question

我正在研究（粘滞）滚动边栏。问题是，大多数粘性侧边栏没有考虑侧边栏可能比视口高（例如，如果很多项目被添加到篮子（边栏））。这是我想要解决的。这些都是要求：

• 如果侧边栏的高度越高，则视口，应该 滚动通过内容和div的底部应该坚持 视口的底部进一步向下滚动时。

• 如果侧边栏的高度比视口高，则只有当您位于 页面的底部时，才会显示下面的divs 。

• 当用户向后滚动时，侧边栏滚动回顶部并且 粘回到视口的顶部。

• 如果侧边栏的高度小于视口，则在向下滚动时应从顶部粘贴 。

所以总的来说相当一些功能，并不是那么简单（我认为）。我见过的最接近我想要实现的是这个例子：http://demo.techbrij.com/730/fix-sidebar-scrolling-jquery.php但代码写入的方式不适合我的。

到目前为止，这是我做了什么：DEMO

而jQuery代码我使用：

jQuery(document).ready(function($) { 

var $sidebar = $('.sidebar'), 
    $content = $('.content'); 

if ($sidebar.length > 0 && $content.length > 0) { 
    var $window = $(window), 
     offset  = $sidebar.offset(), 
     timer; 

    $window.scroll(function() { 
     clearTimeout(timer); 
     timer = setTimeout(function() { 
      if ($content.height() > $sidebar.height()) { 
       var new_margin = $window.scrollTop() - offset.top; 
       if ($window.scrollTop() > offset.top && ($sidebar.height()+new_margin) <= $content.height()) { 
        // Following the scroll... 
        $sidebar.stop().animate({ marginTop: new_margin }); 
       } else if (($sidebar.height()+new_margin) > $content.height()) { 
        // Reached the bottom... 
        $sidebar.stop().animate({ marginTop: $content.height()-$sidebar.height() }); 
       } else if ($window.scrollTop() <= offset.top) { 
        // Initial position... 
        $sidebar.stop().animate({ marginTop: 0 }); 
       } 
      } 
     }, 100); 
    }); 
} 

}); 

Answer 1

您正在使用的利润率四处移动粘边栏 - 我发现这是一个棘手的方式来处理您当前的问题（可能更重的方式）。

一般来说，我喜欢简单地在侧边栏中添加一个类，使其成为“位置：固定”，因此浏览器在保持锁定状态时不费吹灰之力。

对于您当前的问题，您只需根据滚动的距离以编程方式滚动该位置固定div（也是100％的高度）。看看我的例子，看看这是影响你之后：http://jsfiddle.net/ZHP52/1/

这里是jQuery的：

jQuery(document).ready(function($) { 

var $sidebar = $('.sidebar'), 
    $content = $('.content'); 

//Since our CSS is going to monkey with the height as you scroll, I need to know the initial height. 
var sidebarHeight = $sidebar.height(); 

if ($sidebar.length > 0 && $content.length > 0) { 
    var $window = $(window), 
     offset  = $sidebar.offset(), 
     timer; 

    $window.scroll(function() { 

     if ($content.height() > sidebarHeight) { 
      var new_margin = $window.scrollTop() - offset.top; 
      if ($window.scrollTop() > offset.top) { 
       // Fix sidebar 
       $sidebar.addClass("fixed"); 
       // Scroll it the appropriate ammount 
       $sidebar.scrollTop(new_margin);    
      }else{ 
       $sidebar.removeClass("fixed"); 
      } 
     } 
    }); 
} 

}); 

Answer 2

我相信这是你正在寻找的功能：http://jsfiddle.net/JVe8T/7/

对不起杂乱的代码，但它应该是相当容易优化它。我还假设sidebar2（非粘性的）已经定义了高度，如果不是这种情况，你可以用jquery检测它并使用.css选择器进行底部偏移。

这里是我的代码：

jQuery(document).ready(function() { 

    var tmpWindow = $(window), 
     sidebar = $('.sidebar'), 
     content = $('.content'), 
     sidebar1 = $('.sidebar1'), 
     sidebar2 = $('.sidebar2'), 
     viewportHeight = $(window).height(), 
     sidebarHeight = sidebar.height(), 
     sidebar1Height = sidebar1.height(), 
     sidebar2Height = sidebar2.height(), 
     offsetBottom; 


    tmpWindow.scroll(function(){ 

     offsetBottom = content.height() - sidebar2Height; 

     //if sidebar height is less that viewport 
     if (viewportHeight > sidebarHeight) { 
      sidebar.addClass('fixed'); 
     } 

     //sticky sidebar1 
     if ((tmpWindow.scrollTop() + viewportHeight) > sidebar1Height) { 
      sidebar1.addClass('bottom'); 
     } else { 
      sidebar1.removeClass('bottom'); 
     } 

     //end of content, visible sidebar2 
     if ((tmpWindow.scrollTop() + viewportHeight) > offsetBottom) { 
      sidebar1.removeClass('bottom'); 
      sidebar1.addClass('fixedBottom'); 
     } else { 
      sidebar1.removeClass('fixedBottom'); 
     } 

    }); 

}); 

Answer 3

退房hcSticky，我只是想要这个。这是一种“完美”的粘性侧边栏，也可以用选项模拟其他库。

第一个演示可能是每个人都需要的，它独立于主要内容滚动容器。 （您可以在到达页面底部之前浏览整个侧边栏，或者在到达页面顶部之前向上滚动栏）。

查看：http://someweblog.com/demo/hcsticky/