隐藏在引导后输入后面滚动的文本

本文介绍了隐藏在引导后输入后面滚动的文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

在我的示例中，我有一个固定的输入 data-spy =affix，它向下移动 90px 由于父母< div class =containerstyle =margin-top：80px> 。

<所以唯一应该滚动的是文字。这实际上是有效的！

我的问题是在输入后面滚动的文本是可见的，我想隐藏它！

我试图在输入前添加一个白色框，但是我所有的尝试都没有真正成功！ 所以我希望你能帮助我！谢谢

bootply/113734

解决方案

事实上，@ nico-o已经在这里给出了答案。

< div style =background-color：white; padding机顶：80px; data-spy =affixdata-offset-top =1> < input class =form-controlid =searchtermname =tagsplaceholder =Inputtype =text> < / div>

这样做，您将遇到与此处所述相同的问题： Bootstrap 3RC1 +侧面板+附加。

为了解决这个问题，请添加：

$（document）.scroll （function（）{ $（'。affix'）。width（$（'。container'）。width（））; }）;

请参阅： bootply/113811

@ nico-o还提供了一个可滚动的文本容器，参见 getbootstrap/javascript/#scrollspy-examples 为例

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!

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

bootply/113734

解决方案

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: bootply/113811

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