Question

正如我的问题所示，我是一名初学者，我有一个表格，其中有2个td in html并假设一个td（.sidebar）的高度是1000px而另一个td（.content）的高度是5000px，现在我想要滚动两个td与主体滚动这是默认行为，但我想要的是

当主体向下滚动时： - 然后当第一个td（.sidebar）到达它的底部时它应该停止滚动而另一个td（.content）应该向下滚动到他的高度5000px
当主体向上滚动时： - 当身体滚动到达第一个td（.sidebar）的高度时，它应该开始滚动主体滚动。

我已经编写了js代码以确定滚动时间何时上升以及何时下降但没有运气这样做，我无法修复td（.sidebar）的位置，因为它会使流出父元素布局。请任何人都可以帮助我，任何提示请[JS小提琴] [1]

<!doctype html>
<html lang="en">
 <head>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title>Document</title>
<script>
window.onscroll = function(){homeScroller()};

var lastScrollTop = 0;
var st = window.pageYOffset || document.documentElement.scrollTop; 
function homeScroller() {
    if(st> lastScrollTop){
        if(st == $('.sidebar').height()){
            //stop sidebar td from scrolling with main body scroll
        } 
    }else{
        if(st == $('.sidebar').height()){
            //start sidebar td from scrolling with main body scroll
        } 
    }
    lastScrollTop = st;
}

</script>
<style>
   html {
       display: table;
       margin: auto;
       width:100%;
   }

 body {
      display: table-cell;
      vertical-align: middle;
      text-align:center;
  }      
  .center-content{
      width:100%;
      margin:0;
      padding:0;
}
.container{
}
.sidebar{
    vertical-align:top;
    overflow:hidden;
}
.content{
    vertical-align:top;
}
</style>
</head>
<body>
    <div class="center-content" align="center"> 
        <table class="container" cellspacing=0 cellpadding=40>
        <tr><td class="sidebar" align="" height="1000px" style="">
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
        </td><td class="content" height="5000px" width="">  
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
            abcdefghijklmnopqrstuvwxyz</br>
        </td></tr>
        </table>
</div>   

</body>
</html>

<script>
</script>`

Answer 1

我认为这可能就是你所追求的。有几种方法可以优化这一点，但我认为这应该可以帮到你。 sbTop 中的 -20 只是为侧边栏底部提供一点视觉填充。

for (var i=0; i<50; i++){
  if (i < 25) { $(".sidebar").append("row " + i + "<br />") };
  $(".content").append("row " + i + "<br />")
}

$(window).on("scroll", function(){
  var wScrollTop = $(window).scrollTop();
  var wHeight = $(window).height();
  var wScrollBottom = wScrollTop + wHeight;
  var sbHeight = $(".sidebar").height();
  var sbTop = Math.max(wScrollBottom - sbHeight - 20, 0);

  $(".sidebar").css("top", sbTop + "px");
});

table { width: 80%; margin: auto; }

tr { vertical-align: top; }

.sidebarContainer {
  width: 25%;
  position: relative;
}

.sidebar {
  width: 100%;
  position: absolute;
  top: 0px;
  background-color: aliceblue;
}

.content {
  background-color: mistyrose;
}

<table>
  <tr>
    <td class="sidebarContainer"><div class="sidebar"></div></td>
    <td class="contentContainer"><div class="content"></div></td>
  </tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Answer 2

我不确定这是否会有所帮助，因为我不确定我是否理解得很好，但是我更改了一些代码，而不是使用表我使用div。所以代码是：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <style>
        .container{
        }
        .sidebar{
          vertical-align:top;
          background-color: #fc0;
          width: 200px;
          height: 1000px;
          padding:20px;
          float:left;
        }
        .content{
          background-color: #0fc;
          padding:20px;
          vertical-align:top;
          height:5000px;
          position: inherit;
          display: block
          top:7px;
          left: 250px;
          float: left;
        }
        .fixed{
          position: fixed;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
        </div>
    <div id="content" class="content fixed">    
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
            abcdefghijklmnopqrstuvwxyz<br>
        </div>
    </div>
<script>
    window.onscroll = function(){homeScroller()};
    $('div#content').width($(window).width()-299);
    // var lastScrollTop = 0;
    function homeScroller() {
        var st = $(window).height() + $(window).scrollTop(); 
        // console.log('sidebar: ' + $('.sidebar').height() + ' | st: ' + st);
        console.log($(window).width()-299);
        // if(st > lastScrollTop){
            if(st >= $('.sidebar').height() && $('div#content').hasClass('fixed')){
                //stop sidebar td from scrolling with main body scroll
                $('div#content').removeClass('fixed');
            } 
        // }else{
            if(st < $('.sidebar').height() && !$('div#content').hasClass('fixed')){
            //  //start sidebar td from scrolling with main body scroll
                $('div#content').addClass('fixed');
            } 
        // }
    }
        // lastScrollTop = st;
</script>    
</body>
</html>

我希望这可以给你一些帮助。玩得开心编程！

如何阻止表的td滚动到同一个表的其他tds

2 个答案: