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

我假设你想要某种带有固定标题的自制表。您可以通过以下方式执行此操作：

将标题和正文放在不同的div中。
通过分别向标题和正文添加\documentclass[RAM]{dfgproposal} \begin{document} \begin{proposal} a \end{proposal} \end{document}和overflow: hidden，使两者都可滚动。
使用这段JQuery使它们同时水平滚动。
```
overflow:auto
```

两个＆＃34;表格中的间距＆＃34;必须是相同的，他们才能正确对齐。如果您有任何问题：请确保标题和正文的$("div").scroll(function(){ $("div:not(this)").scrollLeft($(this).scrollLeft()); });为position或fixed。

编辑：将代码从absolute更改为.on("scroll", function(...))

According to this page，第一个只是第二个的快捷方式。但是这个功能似乎有效，而另一个则没有。

<强> JSFiddle

滚动水平和垂直时固定头部

1 个答案: