Question

我有两个设置为固定位置的元素，如果它们到达页面底部，则使用javascript将position元素设置回静态。

当我尝试通过单击滚动条并拖动它来滚动时，我遇到了问题。如果您一直滚动到底部，那么如果您尝试单击滚动条并将其向上拖动。它闪烁并阻止我滚动。

HTML

<header>This is the header</header>
<main>
    <div id="content"></div>
    <section id="fixed-elements">
        <div id="fix1">Fixed Footer2</div>
        <div id="fix2">Fixed Footer1</div>
    </section>
</main>
<footer>This is the footer</footer>

的Javascript

$(document).ready(function () {

$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        $('#fixed-elements').css({
            'position': 'static',
                'bottom': 'auto',
        });
    } else {

       $('#fixed-elements').css({
            'position': 'fixed',
                'bottom': '0',
        });            
    }
});

});

CSS

footer, header {
    background-color:green;
}
#content {
    height:1000px;
}
#fixed-elements {
    position:fixed;
    bottom:0;
    overflow:hidden;

}

这里发生了什么？我该如何解决？（我认为尝试使用鼠标中键点击滚动时会出现类似情况。）

Answer 1

可以在没有静态的情况下完成，但重新计算的值为：

'bottom': $('footer').outerHeight(true) + (($('body').outerHeight(true) - $('body').outerHeight())/2),

http://jsfiddle.net/rbz16Lpp/

Answer 2

查看此jsfiddle。它可以在没有闪烁的情况下完成您想要的任务。

基本上，一旦滚动到页脚顶部，它会将#fixed-elements的位置设置为绝对，相对到main的底部，其中position: relative为$(document).ready(function () { var totalHeight = $(document).height() - $(window).height(), footerHeight = $('footer').outerHeight(); $(window).scroll(function () { console.log($(window).scrollTop(), (totalHeight - footerHeight)); if ($(window).scrollTop() > (totalHeight - footerHeight)) { $('#fixed-elements').css({ 'position': 'absolute', 'bottom': 0 }); } else { $('#fixed-elements').css({ 'position': 'fixed', 'bottom': 0 }); } }); });

jQuery的：

/* you might consider removing padding and margin from the body, because it'll make it a little smoother body { margin: 0; padding: 0; } */ main { position: relative; // added this to main } footer, header { background-color:green; } #content { height:1000px; } #fixed-elements { position:fixed; bottom:0; }

CSS（仅添加了一行）：

<html> <body> <center> <form id="pluginsForm"> <input type="checkbox" value="Button_1" name="plugin">Button_1 <input checked type="checkbox" value="Button_2" name="plugin">Button_2 <input type="checkbox" value="Button_3" name="plugin">Button_3 <input checked type="checkbox" value="Button_4" name="plugin">Button_4 <br> <br> <input type="BUTTON" value="Go" onclick="alert('GO')"> </form> </center> </body> </html>

如何在尝试滚动时修复闪烁效果

2 个答案: