jquery - 滚动页面时如何使表单覆盖布局的内容

Question

当我滚动页面的内容时，我使用jScroll来制作滚动元素。我曾经滚动其他元素，如侧边栏，它可以工作。但我不能用它来滚动表单搜索，这是我的问题索引页面：

http://s18.postimage.org/5tv1zbjvd/scroll_filter.png

当我滚动页面时，表单过滤器搜索仍然存在并且问题也存在。这是我用来滚动的代码：

<% content_for :head do %>
    <script type="text/javascript">
        $(document).ready(function(){ 
            $("#results").pageless( { 
                totalPages: 10,
                url: 'questions/',
                loaderMsg: 'Loading more results'       
             });
            $("#new_question").jScroll({top: 100 });
            $("#import").jScroll({top: 100});
        });
    </script>
<% end %>

我滚动了侧边栏新问题并成功导入。我的表单标签搜索和过滤器位于div#search和中div#filter。所以我想问我怎样才能向下滚动内容，这些表格也会向下滚动，它们会放在问题内容的上方。您可以向我展示 jquery 可以做什么，而不必工作jScroll。

更新：添加位置固定

现在页面显示：

http://s8.postimage.org/wq6fya3qd/scroll_filter_error.png

形式

<div class="span7">
        <div class="page-header">
            <%= render 'search' %>
            <%= render 'search_filter' %>
        </div>
        <div id="results">
            <ul class="questions">
                <%= render @questions %>
            </ul>
        </div>
</div>

CSS：

div.page-header {
  position: fixed;
}

Answer 1

在此示例fixed中使用 csspadding或margin和background类似：

html:

 <div id="static">I'm A static header;</div>
  <div id="content">
  <div class="text">I'm a text box</div>
  <div class="text">I'm a text box</div>
  <div class="text">I'm a text box</div>
  <div class="text">I'm a text box</div>
  <div class="text">I'm a text box</div>
  <div class="text">I'm a text box</div>
  <div class="text">I'm a text box</div>

CSS：

#content {
 padding-top: 100px;
}
#static {
 top: 0px;
 left: 0px;
 font-size: 2em;
 position:fixed;
 width: 100%;
 text-align: center;
 height: 100px;
 border: 1px solid black;
 background: white;
}
.text {
 background: skyblue; 
 font-size: 1.4em;
 height: 1em;
 margin-top: 10px;
 width: 80%;
 text-align: center;
 padding: 20px;
 border-top: 1px solid black;
 margin-left: 10%;
}