jquery 滚动 fadeIn 页脚，隐藏在页面底部

Question

我有一个带有“更多”提示的页脚，该提示会淡入以提示用户下面有更多内容。

如果有更多内容（您需要向下滚动才能看到），它会在页面加载时淡入文档顶部。

如果页面下方没有更多内容可供滚动，则它不会淡入（如果加载时所有内容都适合窗口）。这是成功的。

我已经将其编写为当到达页面底部的段落时不会淡入。因此，如果您需要向下滚动才能看到内容，它会淡入，直到您到达页面末尾（由段落“#last”表示）。这部分将不起作用。

想法将不胜感激。

HTML页脚：

<footer id="fixedmore">
 <p>more</p>
 <div class="downArrow">
 </div>
</footer>

HTML最后一段

<p id="last">
THE END
</p>

CSS固定页脚

#fixedmore
{
    width:100%;
    height:30px;
    left:0px;
    bottom:0px;
    position:fixed;
    color:white;
    text-align:center;
    text-shadow:0px 0px 4px rgba(0,0,0,0.5);
    font-weight:500;
    font-size:14px;



    /* fallback/image non-cover color */
    background-color:rgba(0,0,0,0.3);       
    /* Safari 4+, Chrome 1-9 */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.05)));        
    /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.05));      
    /* Firefox 3.6+ */
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.05));     
    /* IE 10+ */
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.05));      
    /* Opera 11.10+ */
    background-image: -o-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.05));

}

    .downArrow
    {
        width:0;
        height:0;
        border-left:50px solid transparent;
        border-right:50px solid transparent;
        border-top:10px solid white;
        margin:auto;
    }

CSS最后一段

#last
{
text-align:center;
font-size:10px;
}

JQuery窗口滚动

$(window).scroll(function(){
    $('#fixedmore').hide();
    var distanceTop = $('#last').offset().top - $(window).height();
    if  ($(window).scrollTop() < distanceTop){
        $('#fixedmore').fadeIn(3000);
    }

    else{
        $('#fixedmore').hide();
    };          

});

Answer 1

我想您会发现它确实会触发，但是滚动顶部事件会在您开始滚动时触发，而不是在您停止时触发，这正是您想要的。您可以测试一下：如果您滚动到页面底部，停止，然后稍微滚动一下以使 #last 保持可见，您应该会看到 #fixedmore 保持隐藏状态。问题是，大多数时候你的用户会从更远的地方滚动到#last，所以它不会触发。

James Padolsey 的此插件允许对于特殊的滚动事件，如scrollStart 和（更重要的是！）scrollEnds。试一试！