0

I've used jScroll to make a scroll element when i scroll the content of page. I have used to scroll other elements like sidebar, it works. But I can not use it to scroll the form search, This is my questions index page:

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

When i scrolled the page, the form filter search still there and question also. This is my code I used to scroll:

<% 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 %>

I have scrolled the sidebar new question and import successful. My form tag search and filter are in div#search and div#filter. So I wan to ask how can I scroll down the content, these form will go down also and they will be laid above the content of question. You can show me what ever jquery to do, not have to work jScroll.

Update: Add position fixed

The page display now:

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

Form

<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;
}
10
  • not easy to understand exactly what you want. Create a simple html demo in jsffidle.net. You can toggle a class that changes an element to fixed position and make it easier to look at than the bouncing that jScroll creates
    – charlietfl
    Nov 17, 2012 at 0:15
  • @charlietfl i want the form search and filter go down when i scroll the content down.
    – Thanh
    Nov 17, 2012 at 0:18
  • 1
    again this is simple with position:fixed in css
    – charlietfl
    Nov 17, 2012 at 0:19
  • 1
    without more detail it is very difficult to understand your needs. Look at this for example jsfiddle.net/LsnLa Unless you provide some html to work with, and enough basic css , it is hard to visualize your layout
    – charlietfl
    Nov 17, 2012 at 0:24
  • 1
    what you mean ? this ?
    – zb'
    Nov 17, 2012 at 0:46

1 Answer 1

1

Use css fixed,padding or margin and background like in this example:

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%;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.