Question

我在这个例子中遇到两个问题：

fixed_header_bottom应该固定在fixed_header_top下方，以便fixed_header_middle向上滚动时逐渐消失，反之亦然。 实际上这可以在我的电脑上运行，但由于某种原因，它不适用于JSFIDDLE！所以我也必须提高它。

如果在光标位于页面底部时刷新页面，则fixed_header_bottom仍应固定在fixed_header_top下方。仅在Opera浏览器（12.16）上失败，其他浏览器没问题。

JSFIDDLE here

我该如何解决问题？

JS：

$(window).load(function ()
{
    $(document).ready(function ()
    {
        $(window).bind("scroll", function (e)
        {
            if (! $('#fixed_header_bottom').hasClass('fixed'))
            {
                if ($(document).scrollTop() >= 300)
                {
                    $('#fixed_placeholder').show();
                    $('#fixed_header_bottom').addClass('fixed');
                }
            }
            else
            {
                if ($(document).scrollTop() < 300)
                {
                    $('#fixed_placeholder').hide();
                    $('#fixed_header_bottom').removeClass('fixed');
                }
            }
        });
    });
});

CSS：

*
{
    margin: 0;
    padding: 0;
}
#fixed_header_top
{
    display: block;
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: #DD33DD;
    top: 0px;
}
#fixed_header_middle
{
    display: block;
    width: 100%;
    height: 300px;
    background-color: #DDDD00;
    margin-top: 50px;
}
#fixed_header_bottom, #fixed_placeholder
{
    display: block;
    width: 100%;
    height: 50px;
    background-color: #11DD55;
}
#fixed_placeholder
{
    display: none;
}
.fixed
{
    position: fixed;
    top: 50px;
}
#body_block
{
    display: block;
    width: 100%;
    background-color: #FFFFFF;
}

HTML：

<div id="fixed_header_top">fixed_header_top</div>
<div id="fixed_header_middle">fixed_header_middle</div>
<div id="fixed_header_bottom">fixed_header_bottom</div>
<div id="fixed_placeholder">Shouldn't see me</div>
<div id="body_block">BEGIN
    <br />
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />Bottom
    <br />
    <br />END
</div>

Answer 1

将此添加到您的jquery代码：

if($('#fixed_header_bottom').offset().top<=50) {
      $('#fixed_header_bottom').addClass('fixed');
} else {
      $('#fixed_header_bottom').removeClass('fixed');
}

这里是小提琴：http://jsfiddle.net/6KAdU/5/

注意：在$（window）中加载$（document）.ready（）是没有意义的.load（）

Answer 2

你可以保存最后一个窗口滚动到一个Cookie并读取它并获取此值来设置滚动位置:)
这是最好的主意
或者使用html sharp链接：

<div id="mydiv" ></div>

<a href="#mydiv" >Link To Div by 'mydiv' id </a>

滚动后修复div并在页面刷新后保持固定

2 个答案: