固定头同时滚动水平以及垂直

Question

我试图修复我的头部部分常数时滚动垂直，而且应该可以滚动水平也。

HTML：

<div id="c1"> 
    <div id="c2"> 
     <ul style="font-weight:bold;position:fixed;"> 
      <li>Lorem ipsum wide</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum even more width</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum even more width</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum</li> 
       <li>Lorem ipsum even more width</li> 
      <li>last</li><li>Lorem ipsum even more width</li> 
     </ul> 
     <ul> 
      <li>Lorem ipsum wide</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum even more width</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum even more width</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum</li> 
       <li>Lorem ipsum even more width</li> 
      <li>last</li> 
      <li>Lorem ipsum even more width</li> 
     </ul> 
     <ul> 
      <li>Lorem ipsum wide</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum even more width</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum even more width</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum</li> 
       <li>Lorem ipsum even more width</li> 
      <li>last</li><li>Lorem ipsum even more width</li> 
     </ul> 
     <ul> 
      <li>Lorem ipsum wide</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum even more width</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum even more width</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum</li> 
       <li>Lorem ipsum even more width</li> 
      <li>last</li> 
      <li>Lorem ipsum even more width</li> 
     </ul><ul> 
      <li>Lorem ipsum wide</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum even more width</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum even more width</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum</li> 
       <li>Lorem ipsum even more width</li> 
      <li>last</li><li>Lorem ipsum even more width</li> 
     </ul> 
     <ul> 
      <li>Lorem ipsum wide</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum even more width</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum even more width</li> 
      <li>Lorem ipsum</li> 
      <li>Lorem ipsum</li> 
       <li>Lorem ipsum even more width</li> 
      <li>last</li> 
      <li>Lorem ipsum even more width</li> 
     </ul> 

    </div> 
</div> 

CSS：

ul li {float: left;width:200px;} 
ul{clear:both;} 
#c1 { overflow: scroll;height:100px; } 

的Jquery：

var sum = 0; 
$("#c2 ul li").each(function(){sum += $(this).width()}); 
$("#c2").css('width', sum/$("#c2 ul").length); 
$(function() { 
    var $blue = $("#c2"), 
     $pg = $("#c1"), 
     $document = $(document), 
     left = 0, 
     scrollTimer = 0; 


    // Detect horizontal scroll start and stop. 
    $document.on("scroll", function() { 
    var docLeft = $document.scrollLeft(); 
    if(left !== docLeft) { 
     var self = this, args = arguments; 
     if(!scrollTimer) { 
     // We've not yet (re)started the timer: It's the beginning of scrolling. 
     startHScroll.apply(self, args); 
     } 
     window.clearTimeout(scrollTimer); 
     scrollTimer = window.setTimeout(function() { 
     scrollTimer = 0; 
     // Our timer was never stopped: We've finished scrolling. 
     stopHScroll.apply(self, args); 
     }); 
     left = docLeft; 
    } 
    }); 

    // Horizontal scroll started - Make div's absolutely positioned. 
    function startHScroll() { 
    //console.log("Scroll Start"); 
    $("#c3") 
    // Clear out any left-positioning set by stopHScroll. 
    .css("left","") 
    .each(function() { 
     var $this = $(this), 
      pos = $this.offset(); 
     // Preserve our current vertical position... 
     $this.css("top", pos.top) 
    }) 
    // ...before making it absolutely positioned. 
    .css("position", "absolute"); 
    } 

    // Horizontal scroll stopped - Make div's float again. 
    function stopHScroll() { 
    var leftScroll = $(window).scrollLeft(); 
    // console.log("Scroll Stop"); 
    $("#c3") 
    // Clear out any top-positioning set by startHScroll. 
    .css("top","") 
    .each(function() { 
     var $this = $(this), 
     pos = $this.position(); 
     // Preserve our current horizontal position, munus the scroll position... 
     $this.css("left", pos.left-leftScroll); 
     //alert(pos.left-leftScroll); 
    }) 
    // ...before making it fixed positioned. 
    .css("position", "fixed"); 
    } 
}); 

这里是Fiddle。
请问任何人都可以帮我解决我哪里错了。

Answer 1

我假设你想要某种带有固定标题的自制表。你可以这样做：

1. 将标题和正文放在不同的div中。
2. 通过分别将overflow: hidden和overflow:auto添加到标题和正文中，使两者都可以滚动。

3. 使用这块JQuery使它们同时水平滚动。

   $("div").scroll(function(){ 
       $("div:not(this)").scrollLeft($(this).scrollLeft()); 
   }); 
   

的间距在这两个“表”必须是相同为他们妥善allign。如果您有任何问题：确保标头和正文的position或者是fixed或absolute。

---

EDIT：改变代码从.on("scroll", function(...))到.scroll(function(...))

According to this page，首先是刚刚对第二快捷方式。但是这个功能似乎起作用，而另一个则不起作用。

JSFiddle