0

ページのコンテンツをスクロールするときに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;
}
4

1 に答える 1

1

次の例のようにcssfixedを使用します。paddingmarginbackground

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%;
}
于 2012-11-17T00:54:05.720 に答える