如何阻止表的 td 在同一个表的其他 td 之间滚动答案

【问题标题】：how to stop a td of table from scrolling among other tds of same table如何阻止表的 td 在同一个表的其他 td 之间滚动
【发布时间】：2019-04-04 19:49:57
【问题描述】：

正如我的问题所暗示的，我是一名初学者，我有一张桌子，在 html 中有 2 个 td，假设一个 td（.sidebar）的高度是 1000px，另一个 td（.content）的高度是 5000px，现在我想滚动 td 和主体滚动，这是默认行为，但我想要的是

当主体向下滚动时：- 当第一个 td(.sidebar) 到达底部时，它应该停止滚动，另一个 td(.content) 应该向下滚动到 5000px 的高度
当主体向上滚动时：- 当主体滚动达到第一个 td(.sidebar) 的高度时，它应该开始随着主体滚动滚动。

我已经编写了 js 代码来识别滚动何时上升，何时下降但没有运气这样做，我无法固定 td(.sidebar) 的位置，因为它会使父元素布局。请任何人都可以帮助我，任何提示请 [JS Fiddle here][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>`

【问题讨论】：

标签： javascript jquery html css scroll

【解决方案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>

【讨论】：

不需要.sidebarContainer {position:relative} 和.sidebar {posistion:absolute}。 onscroll 更改 margin-top 属性。
@user5851956，我不确定我是否在关注问题所在。也许如果我将表格宽度设置为小于 100%，您可以再试一次，让我知道问题所在。
@JonSG 我添加了更多描述（html 和 body css 和中心 div，因为我发现如果我也有一些标题 div，这是开始设计的最佳方式）我的问题还添加了屏幕截图用于绝对位置，采用 100% 表宽设计。谢谢
@AlexKudryashev - 我正在尝试实施您的建议。谢谢
@AlexKudryashev 是否可以在不将位置设置为绝对或固定的情况下实现它，无论是滚动还是以任何方式？如何使用 margin-top 属性停止滚动元素？

【解决方案2】：

我不确定这是否会有所帮助，因为我不确定我是否理解得很好，但是我对您的代码进行了一些更改，而不是使用 table，我使用的是 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>

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

【讨论】：

感谢您的回答，正如我在问题中提到的，我无法将位置固定或显示为块，因为它会使（div 或 td 或任何元素）脱离父布局的流程。您给出的解决方案中的另一个问题是它不适合不同的分辨率，因为在您给我之前我已经尝试过了，即使使用媒体查询也无法修复所有分辨率。你认为这是正确的设计吗？