JQuery прокрутки исчезают в нижнем колонтитуле, скрыть внизу страницы

Question

У меня есть нижний колонтитул с подсказкой «more», которая появляется, чтобы предложить пользователю больше контента ниже.

Он появляется при загрузке страницы в верхней части документа, если есть еще контент (который нужно прокрутить вниз, чтобы увидеть).

Если на странице больше нет содержимого, чтобы прокрутить его, оно не исчезает (если весь загружаемый контент помещается в окно при загрузке). Это успешно.

Я написал это, чтобы не исчезать, когда он попадает в абзац внизу страницы. Так что если есть контент, который нужно прокрутить вниз, чтобы увидеть, он будет постепенно исчезать, пока вы не дойдете до конца страницы (сигнализируется абзацем «#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

Я думаю, вы обнаружите, что он срабатывает, но событие scrollTop срабатывает, когда вы запускаете прокрутку, а не когда вы останавливаетесь, что вам и нужно. Вы можете проверить это: если вы прокрутите страницу до конца, остановитесь, а затем прокрутите немного, чтобы #last оставался видимым, вы должны увидеть, что #fixedmore остается скрытым. Проблема в том, что большую часть времени ваши пользователи будут прокручиваться в #last из дальнего расстояния, поэтому он не будет срабатывать.

Этот плагин от Джеймса Падолси допускает специальные события прокрутки, такие как scrollStart и (что более важно!) ScrollEnds. Дай вихрь!