javascript - 固定内层在外层顶部,滚动外层时防止内层溢出到外层

标签 javascript jquery html css

我一直在尝试在外部 div 的顶部修复内部 div。
1.内层的宽度要大于外层的宽度
2.外层div是可滚动的,滚动时内层div应该保持在外层div的顶部。

我的问题是内部 div 停留在外部 div 的时间更长。


<div id="ScheduleHolder" style="height:100px; width:120px; overflow:scroll">

    <div id="2" valign="top" style="float:none; display:block; position:absolute !important; margin:0;">

        <table border="1" bgcolor="#99FF00">

          <tr>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>



          </tr>

        </table> 

    </div>



    <div id="3" style="float:left; display:block;">

       <table border="1">

          <tr>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>

            <th scope="col">&nbsp;</th>



          </tr>

          <tr>

            <th scope="row">&nbsp;</th>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

                            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

          </tr>

          <tr>

            <th scope="row">&nbsp;</th>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

                            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

          </tr>

          <tr>

            <th scope="row">&nbsp;</th>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

                            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

          </tr>

          <tr>

            <th scope="row">&nbsp;</th>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

                            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

          </tr>

          <tr>

            <th scope="row">&nbsp;</th>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

                            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

          </tr>

          <tr>

            <th scope="row">&nbsp;</th>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

                            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

          </tr>

          <tr>

            <th scope="row">&nbsp;</th>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

                            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

          </tr>

          <tr>

            <th scope="row">&nbsp;</th>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

                            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

          </tr>

          <tr>

            <th scope="row">&nbsp;</th>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

                            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

          </tr>

          <tr>

            <th scope="row">&nbsp;</th>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

            <td>&nbsp;</td>

          </tr>

        </table>



    </div>

    <div style="clear:both"></div>

</div>

最佳答案

好吧,只需将内部 div 放在外部 div 之外,然后将现在是外部 div 的内部 div 与外部 div 对齐,当然,现在内部 div 和您的内部 div 将出现在旧内部 div 的顶部div 但我们知道它是 secret 的外部 div。

关于javascript - 固定内层在外层顶部,滚动外层时防止内层溢出到外层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10274501/

相关文章:

javascript - 按 T​​AB 键在相同/不同页面上显示文本框值

javascript - 自动完成菜单上方的输入框 - Bootstrap 3

jquery - 使用 toggleSlide 显示/隐藏 DIV

javascript - Knockout.js 在 if 语句中使用开放式标签

java - 显示标签替代品

javascript - "correctly"如何创建一个继承自Element的对象?

javascript - 使用 CF8 或 JS 根据选择框中的 2 个选择自动填充输入表单字段

javascript - D3.js "exporting"数据

javascript - 从本地 json 文件填充数据表

javascript - 隐藏在模态弹出可滚动部分后面的 jQuery 多选下拉值