如何从顶部下拉 div 容器？
Posted
技术标签:
【中文标题】如何从顶部下拉 div 容器？【英文标题】：How to pull down the div container from top? 【发布时间】：2017-08-05 20:09:38 【问题描述】：我只想拉下表格标签，以便表格适合页面正文。
你看，在上图中，表格或容器的顶部被隐藏了（即，它与nav 标记重叠）。
index.html
<body id="page-top" class="index">
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top">Story Box</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<!-- <li class="page-scroll">
<a href="#portfolio">Portfolio</a>
</li>
<li class="page-scroll">
<a href="#about">About</a>
</li>
<li class="page-scroll">
<a href="#contact">Contact</a>
</li> -->
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<div class="container" tabindex="0" id="body-container">
<div class="row col-lg-offset-5">
<div class="form-group col-lg-12">
<button class="btn btn-success btn-lg" href="#createModal" class="portfolio-link" data-toggle="modal">
<span class="glyphicon glyphicon-plus"></span>
Create
</button>
</div>
</div>
<table id="story-table" class="table table-striped table-bordered" cellspacing="0" >
<thead>
<tr>
<th>Name</th>
<th>Image</th>
<th>Audio</th>
<th>Video</th>
<th>Description</th>
<th>Created At</th>
</tr>
</thead>
<tbody>
% for story in stories %
<tr>
<td> story.name </td>
<td> story.image </td>
<td> story.audio or 'N/A' </td>
<td> story.video or 'N/A'</td>
<td> story.description </td>
<td> story.created_at </td>
</tr>
% endfor %
</tbody>
</table>
</div>
</body>
main.css
#body-container
margin-bottom: 120px;
padding-top: 150px;
max-height: 600px;
【问题讨论】：
$(element).slideDown()。你也缺少 JS 代码。 @Rajesh 不走运.. 我认为 css 有问题。 你指的是哪个js代码？Toggle Navigation menu 的点击处理程序
您是否在 CSS 中指定了body padding-top: 70px; ？ Your navbar is fixed, hence this is required.
【参考方案1】：
你可以试试这样的：
逻辑：
将您的表格设为position: absolute。这将允许您在不影响其他元素的情况下移动此表格。
单击时，切换top 的值。另外由于需要幻灯片效果，可以使用.animate。
注意：出于演示目的，我添加了一个临时类 visible 并基于此返回 top 值。您可以使用任何标志机制来实现这一点
JSFiddle
$(".navbar-toggle").on("click", function()
var top = getTopValue($("#story-table"));
$("#story-table").animate(
top: top
, 400).toggleClass("visible")
)
function getTopValue(el)
return (!el || el.hasClass("visible") ? "-100" : "100") + "px"
$("#story-table").css(
top: getTopValue()
);#body-container
margin-bottom: 120px;
padding-top: 150px;
max-height: 600px;
#story-table
position: absolute;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body id="page-top" class="index">
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top">Story Box</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<!-- <li class="page-scroll">
<a href="#portfolio">Portfolio</a>
</li>
<li class="page-scroll">
<a href="#about">About</a>
</li>
<li class="page-scroll">
<a href="#contact">Contact</a>
</li> -->
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<div class="container" tabindex="0" id="body-container">
<div class="row col-lg-offset-5">
<div class="form-group col-lg-12">
<button class="btn btn-success btn-lg" href="#createModal" class="portfolio-link" data-toggle="modal">
<span class="glyphicon glyphicon-plus"></span>
Create
</button>
</div>
</div>
<table id="story-table" class="table table-striped table-bordered" cellspacing="0" >
<thead>
<tr>
<th>Name</th>
<th>Image</th>
<th>Audio</th>
<th>Video</th>
<th>Description</th>
<th>Created At</th>
</tr>
</thead>
<tbody>
% for story in stories %
<tr>
<td> story.name </td>
<td> story.image </td>
<td> story.audio or 'N/A' </td>
<td> story.video or 'N/A'</td>
<td> story.description </td>
<td> story.created_at </td>
</tr>
% endfor %
</tbody>
</table>
</div>
</body>【讨论】：
以上是关于如何从顶部下拉 div 容器？的主要内容，如果未能解决你的问题，请参考以下文章
如何从可滚动的 div 拖动到 droppable 然后再次拖动？