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

我有一个“更多”提示的页脚淡入以提示用户下面有更多的内容。jquery滚动淡入页脚，隐藏在页面底部

如果存在更多内容（需要向下滚动以查看），它会在页面加载时淡入，在文档的顶部。

如果没有更多的内容向下滚动到它不会淡入（如果所有的内容都适合加载窗口）。这是成功的。

我已经写到它不会淡入，当它到达页面底部的一段。所以如果有内容需要向下滚动查看，它会淡入，直到到达页面的末尾（由'#last'段落指示）。这部分不起作用。

想法将不胜感激。

HTML页脚：

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

HTML末段

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(); 
    };   

});

来源

2011-12-13 ja_him

我想你会发现它确实火，但scrollTop的事件触发时，当你停下来，这是你想要的，你开始滚动，没有。你可以测试一下：如果你滚动到你的页面底部，停下来，然后滚动一下，这样#last仍然可见，你应该看到#fixedmore保持隐藏状态。问题是，大多数时候你的用户会从更远的地方滚动到#last，所以它不会被触发。

This plugin James Padolsey允许特殊的滚动事件，如scrollStart和（更重要的是！）scrollEnds。给它一个旋转！

来源

2012-02-22 15:07:56 Heroes182

我做了一个jsfiddle来说明你当前的问题：http://jsfiddle.net/GoranMottram/kAJC5/ – Heroes182 2012-02-22 15:09:38

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

回答

相关问题