Question

当我滚动页面内容时，我使用jScroll制作了一个滚动元素。我习惯滚动其他元素，如侧边栏，它的工作原理。但是我不能用它来滚动表单搜索，这是我的问题索引页面：

a 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。

更新：添加固定位置

现在显示页面：

a 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

在this示例中使用css fixed，padding或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%;
}

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

1 个答案: