html - 固定标题和向下滑动内容

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

尝试将此 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();
});

如您所见，内容按需要向下推，但是...如果您向下滚动，则看不到它的开头。如果您告诉我您想要的行为是什么，我会尝试解决这个问题(例如，如果您希望在单击输入文本时滚动条位于顶部，很简单)。

编辑:

要在用户点击输入时让窗口滚动到顶部，需要在 else 的末尾添加 window.scrollTo(0,0); > 阻止。如果你希望过渡平滑，可以添加:$('html, body').animate({ scrollTop: 0 }, 0); 代替上面的代码。