Question

我遇到了麻烦。我有一个带有文本框的粘性标题，单击该文本框会向下滑动结果框并向下推送内容。当标题位于顶部时，它可以正常工作。问题是当我向下滚动内容并单击搜索文本框时，我的结果框不再可见。以下是示例：http://www.neolamanite.com/sites/all/themes/jquery/test.html

对于某些添加原因，客户端需要一个粘性标题，但不希望结果框覆盖内容。他希望结果框能够将其推倒。有任何想法吗？可以用jQuery修复吗

以下是html的外观：

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

以下是示例：http://www.neolamanite.com/sites/all/themes/jquery/test.html

没有向下滚动时工作。滚动时不会。

Answer 1

修复

基本上，您的标题位置已固定。但是你的结果框不是......

只需将positioned:fixed; top:45px添加到您的css中的#search-autosuggest（第29行）

为什么会有效

positioned:fixed告诉浏览器元素应该相对于当前窗口定位（忽略滚动）。因此，条形图定位固定且顶部为0像素。它位于当前窗口的顶部。

同时结果框不是，因此它位于顶部（WITH SCROLLING），这意味着您可以滚动它。通过添加定位固定，您可以将条形实际定位到窗口。此外，top:45px将结果降低了45个像素（因此它位于标题下方（高45px））。

Answer 2

尝试将此css添加到您的#search-autosuggest容器中：

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

反馈后编辑：

当然可以用jQuery完成:)我会通过'伪造'下推效果来实现。无论如何，效果并没有多大意义。你会看到它在行动中更好地观察它。将以上样式添加到#search-autosuggest容器并使用此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();
});

正如您所看到的，内容会根据需要向下推，但是......如果您向下滚动，则无法看到它的开头。如果你告诉我你想要的行为是什么，我会尝试解决这个问题（例如，如果你想要点击输入文字时滚动就在顶部，那么就很容易了。）

修改

要在用户点击输入时使窗口滚动到顶部，您需要在window.scrollTo(0,0);块的末尾添加else。如果您希望转换顺利进行，可以添加：$('html, body').animate({ scrollTop: 0 }, 0);而不是上面的代码。

修复了标题和向下滑动的内容

2 个答案: