Question

I’m running into trouble with this. I have a sticky header with a text box that when clicked slides down a results box and pushes the content down. It works ok when the header is positioned on top. The problem is when I scroll down the content and I click on the search text box and my results box is no longer visible. Here is the example: http://www.neolamanite.com/sites/all/themes/jquery/test.html

For some add reason the client wants a sticky header but doesn’t want the results box to go over the content. He wants the results box to push it down. Any ideas? Can this be fixed with jQuery

Here is how the html looks like:

<div class="sticky-header group">
  <div class="sticky-header-inner">
 <input type="text" class="text default-value" value="click here to open results" style="width: 300px;">
 </div>
</div><!-- sticky header -->
<div id="search-autosuggest">
 <ul>
   <li>Result 1</li>
   <li>Result 2 </li>
   <li>Result 3 </li>
   <li>Result 4</li>
 </ul>
</div><!-- search-autosuggest -->
<div id="sticky-wrapper">
 .... content here
</div>

Here is the example: http://www.neolamanite.com/sites/all/themes/jquery/test.html

Works when there is no scrolling down. Not when scrolled down.

Answer 1

Try adding this css to your #search-autosuggest container:

position: fixed;
left: 50%;
margin-left: -500px; /* Half the container's width */

Edited after feedback:

Sure it can be done with jQuery 🙂 I’d do it by ‘faking’ the pushing down effect. Anyway, the effect doesn’t really makes sense. You’ll see it better watching it in action. Add the above styles to the #search-autosuggest container and use this js:

$('.sticky-header input.text').click(function () {
    if ($("#search-autosuggest").is(":visible")) {
        $("#sticky-wrapper").animate({
            marginTop: '-=267'
            }, 500, function() {
            // Animation complete.
        });
    } else {
        $("#sticky-wrapper").animate({
            marginTop: '+=267'
            }, 500, function() {
            // Animation complete.
        });
        window.scrollTo(0,0);
    }
    $("#search-autosuggest").slideToggle();
});

As you can see, the content is pushed down as desired, but… You can’t see the the beginning of it if you have scrolled down. If you tell me what your desired behavior is, i’ll try to fix that (e.g. if you want the scroll to be on top if the input text is clicked, easy peasy).

EDIT:

To make the window scroll to the top when the users clicks the input, you need to add window.scrollTo(0,0); at the end of the else block. If you want the transition to be smooth, you can add this: $('html, body').animate({ scrollTop: 0 }, 0); instead of the above code.