1

In my example i have a fixed input data-spy="affix" that is shifted downwards by 90px because of the parent <div class="container" style="margin-top:80px">.

So the only thing that should scroll is the text. This actually works!

My problem is that the text that is scrolled behind the input is visible and i would like to hide it!

enter image description here

I tried to add a white box before the input but all my tries where not really successful! So i hope you can help me! Thanks

http://bootply.com/113734

Mabedan
  • 857
  • 8
  • 30
John Smith
  • 6,105
  • 16
  • 58
  • 109
  • 2
    It will be the best to make the parent of your input position fixed. Give this element a background-color, like white. Position the element at the very top of the text container. a more portable solution would be to make the Text-container scrollable. – Nico O Feb 14 '14 at 14:58

1 Answers1

0

in fact @nico-o already gives the answer here. Wrap your input inside a div and apply the affix on this:

<div style="background-color:white;padding-top:80px;" data-spy="affix" data-offset-top="1">
<input class="form-control" id="searchterm" name="tags" placeholder="Input" type="text">  
</div>

Doing this you will have the same kind of problem as described here: Bootstrap 3RC1 + Side Panel + Affix.

To solve this add:

$(document).scroll(function(){
    $('.affix').width($('.container').width());
});

See: http://bootply.com/113811

@nico-o also suggest a scrollable Text-container, see http://getbootstrap.com/javascript/#scrollspy-examples for an example

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224