jquery - 滚动页面时试图让 div 停留在顶部。它停留在顶部，但 CSS 正在变形

Question

我的网站有一种搜索框 div，当用户向下滚动以查看数据时，我想将其固定在顶部。虽然当我向下滚动时，div 停留在顶部，但一切都变形了。

编辑: 我没有为 div 使用任何额外的 CSS。它是超大屏幕类 div 中的 Bootstrap 容器类 div。

Here is what it ends up looking like.

    <div class="container" id="searcher" style="text-align: center;">
        <h2>Where Do You Want To Go?</h2>
        <input type="text" class="typeahead form-control"></input>

        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" id="pType" data-toggle="dropdown">
                Select Permit Type
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Every Type</a></li>
                <li><a href="#">Commuter Zone A</a></li>
                <li><a href="#">Commuter Zone B</a></li>
                <li><a href="#">Commuter Zone C</a></li>
                <li><a href="#">Commuter Zone D</a></li>
                <li><a href="#">Commuter Zone L</a></li>
                <li><a href="#">Night Commuter</a></li>
                <li><a href="#">Resident Permits</a></li>
                <li><a href="#">Newark and Camden Permits (L)</a></li>
            </ul>
        </div>

    </div>

我使用的代码:

function fixDiv() {
    var $cache = $('#searcher');
    if ($(window).scrollTop() > 100)
        $cache.css({'position': 'fixed', 'top': '10px'});
    else
        $cache.css({'position': 'relative', 'top': 'auto'});
}
$(window).scroll(fixDiv);
fixDiv();

Answer 1

让我们看看您的 CSS。我很确定您的固定元素需要添加一些不同的样式，因为固定元素不在文档流中，它们不会“适合它们的父级”和其他奇怪之处。

此外，与其通过 javascript 设置菜单样式，不如考虑在函数中添加/删除一个类。然后您可以制作一个不同的 CSS 类来设置菜单样式，并且您可以通过添加该类并刷新页面来调试菜单。

if ($(window).scrollTop() > 100)
    $cache.addClass('fixedMenu');
else
    $cache.removeClass('fixedMenu');

然后添加一些 CSS，例如:

#searcher.fixedMenu {
    position: fixed;
    width: 100%;
    etc...
}