Question

所以我在stackoverflow上阅读了一些帖子，我的网站反应不佳。

我的网站：http://funnykittenmemes.com/

您可以查看源代码和Firebug以查看我正在使用的css和javascript。我试图让浮动条（广告下方）保持固定位置，但是当用户向下滚动时，条形应该保持在步调的顶部。所以它只在用户向下滚动之前保持不变。

我正在尝试使用此代码：http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/

不知道出了什么问题。现在，酒吧坚持但它坚持在原来在网站上的相同位置（当你向下滚动时，你可以看到酒吧上方的空间）。它不会粘在页面顶部。

显然，这篇文章“过于本地化”，所以这里是代码：

在我的标题文件

中

（在结束标题之前）

<script src="/waypoints/shortcuts/sticky-elements/waypoints-sticky.min.js"></script>
<script src="/waypoints/waypoints.js"></script>

（在头标记之后）

 <header class="header-bar">
     floating bar code here
 </header>

在我的页脚文件中

（在结束身体标签之前）

 <script type="text/javascript">
 $(document).ready(function() {
$('.header-bar').waypoint('sticky');
 });
 </script>

CSS

 header {
 height:40px;
 background-color: #222222;
 padding:0pt;
 min-width: 1060px;
 height:50px;
 border-top: 1px solid #333;
 border-bottom:1px solid #000;
 box-shadow: #000000;
 width: 100%;
 z-index: 999;
 position: fixed;
 }

 .header-below {
 background-color: #000;
 color: #fff;
 height: 180px;
 border-top: 1px solid #333;
 }

 .header-bar.stuck {
 height:40px;
 background-color: #222222;
 padding:0pt;
 min-width: 1060px;
 height:50px;
 border-top: 1px solid #333;
 border-bottom:1px solid #000;
 box-shadow: #000000;
 width: 100%;
 z-index: 999;
 position: fixed;
 }

标题下方属性适用于浮动栏下方的区域。

更新：让它正常工作。

将.header-bar.stuck css属性属性更改为：

 .header-bar.stuck {
 position:fixed;
 top:0;
 box-shadow:0 2px 4px rgba(0, 0, 0, .3);
 }

将脚本移动到$（文档）代码正上方的页脚文件中从“min.js”中删除了“min”。不需要“min”。

我花了一段时间才注意到，但这就是我所做的。确保浮动栏有一个类并且在$（文档）代码中。 CSS和javascript必须匹配。并确保在代码中调用正确的js文件。如果需要，可以查看我的源代码：）

Answer 1

将.header-bar.stuck css属性属性更改为：

 .header-bar.stuck {
 position:fixed;
 top:0;
 box-shadow:0 2px 4px rgba(0, 0, 0, .3);
 }

将脚本移动到$（文档）代码正上方的页脚文件中。从“min.js”中删除了“min”。不需要“min”。

我花了一段时间才注意到，但这就是我所做的。确保浮动栏有一个类并且在$（文档）代码中。 CSS和javascript必须匹配。并确保在代码中调用正确的js文件。如果需要，可以查看我的源代码：）

Wordpress浮动条像9gag？

1 个答案: