Нижний колонтитул скользит вверх .slideUp, но затем скользит вниз

У меня есть функции jQuery.slideUp и .slideDown ниже, и при достижении div #showfootershop внизу окна браузера div #footershop открывается, а затем сразу же открывается слайд-шоу.

Как я могу заставить #footershop оставаться "вверх" и видимым, когда #showfootershop находится в нижней части окна браузера и не сдвинется вниз, пока пользователь не прокрутит окно браузера?

Fiddle: http://jsfiddle.net/8PUa9/1/

JQuery

$(window).scroll(function(){
/* when reaching the element with id "showfootershop" we want to
show the slidebox. */

    var distanceTop = $('#showfootershop').offset().top - $(window).height();

    if  ($(window).scrollTop() > distanceTop)
        $("#footershop").slideUp();
    else
        $("#footershop").slideDown();

});

html в нижнем колонтитуле:

<div id="showfootershop"></div>
<div id="footershop">
    <h1>Shop Links</h1>
</div>
</body>
</html>

CSS

#footershop {
   height:35px;
   width:100%;
   display: none;
   z-index: 2;
}

ОТВЕТЫ

Ответ 1

Используйте две функции для slideUp и slideDown и переключайте их, как только вы показываете слайдер и скрываете его в качестве альтернативы.

$(function() {

    var slideUp = function() {
        if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
            console.log('At bottom!!');
            //toggle the handlers
            $("#footershop").slideDown(function() {
                $(window).off('scroll', slideUp).on('scroll', slideDown);
            });
        }
    };

    var slideDown = function() {
        if ($(window).scrollTop() + $(window).height() < $(document).height()) {
            //toggle the handlers
            $("#footershop").slideUp(function() {
                $(window).off('scroll', slideDown).on('scroll', slideUp);
            });
        }
    };


    $(window).on('scroll', slideUp);
});​

EDIT: Я думаю, что основная проблема, с которой вы сталкиваетесь, - #footershop увеличивает document.height, когда она показывает и уменьшает, когда скрывается, что является правильным. Это вызывает дополнительные события прокрутки, которые создают нежелательное поведение.

Проверьте эту скрипку: я исправил это частично.

http://jsfiddle.net/BuddhiP/8PUa9/8/ Забастовкa >

Проверьте версию JSBin для исправленной версии: http://jsbin.com/axobow/2

Главное, что я сделал, это #footershop теперь абсолютно позиционируется, поэтому он не приводит к изменению размера документа при его отображении или скрытии, что важно в этом случае, как если бы document.height() изменил его на ваш расчет.

Хотя скрипка работает так, как ожидалось, div не находится прямо внизу. Надеюсь, вы сможете это исправить.

Надеюсь, что это поможет.

ПРИМЕЧАНИЕ. Вам нужно проверить скрипку с окном полной высоты, иначе вы не увидите, как нижний колонтитул скользит вверх, так как он отображается где-то посередине текста.

Ответ 2

Я не уверен, что случилось с другими ответами, которые вы не приняли, но здесь мои:

JSFiddle

JS:

$(window).scroll(function() {

    var distanceTop = $('#showfootershop').offset().top - $(window).height();

    if ($(window).scrollTop() >= distanceTop - 20) {
        $("#footershop").animate({
            'height': '35px'
        }, 'fast');
    }
    else {
        $("#footershop").animate({
            'height': '0px'
        }, 'fast');
    }
});​

CSS

#footershop {
    height:0px;
    width:100%;
    z-index: 2;
    background:#00ffff;
    position: absolute;
    bottom:0;
    left:0;
    overflow:hidden;
}
body {
    position:relative;   
}

Ответ 3

Альтернативой всему этому jQuery slideUp/slideDown является использование CSS для его обработки.

Мы обнаруживаем, когда пользователь достиг вашего элемента #showfootershop, а затем добавьте или удалите класс из нижнего колонтитула:

$(window).scroll(function()
{

    var distanceTop = $('#showfootershop').offset().top - $(window).height();

    if($(document).scrollTop() >= distanceTop)
         $('#footershop').addClass("show");
    else
         $('#footershop').removeClass("show");
}

Затем мы используем CSS для отображения нижнего колонтитула или скрыть его в зависимости от наличия этого класса:

#footershop 
{
    position: fixed;
    height: 0px;
    z-index:999;
    bottom: 0;
    overflow:none;

   -moz-transition:all 0.5s ease-in-out;
   -o-transition:all 0.5s ease-in-out;
   transition:all 0.5s ease-in-out;
   -webkit-transition:all 0.5s ease-in-out;
}
#footershop.show
{
    height:35px;

   -moz-transition:all 0.5s ease-in-out;
   -o-transition:all 0.5s ease-in-out;
   transition:all 0.5s ease-in-out;
   -webkit-transition:all 0.5s ease-in-out;
}

Как вы можете видеть выше, когда класс .show находится на нижнем колонтитуле, мы меняем высоту элемента нижнего колонтитула, чтобы отобразить его. Переходы CSS затем используются для анимации этого изменения.

Самое приятное в этом методе - это очень легкий и эффективный (особенно если у вас много анимаций jQuery, работающих одновременно), и вы можете легко анимировать различные различные изменения, такие как прозрачность, текст и цвета фона и т.д., без необходимости касаться вашего JS вообще.

jsFiddle

Здесь ваш jsFiddle изменен http://jsfiddle.net/DigitalBiscuits/8PUa9/29/

Ответ 4

slideUp() также скроет элемент, и смещение скрытого элемента будет [0,0], поэтому скрытый нижний колонтитул distanceTop будет отрицательным. Вы можете анимировать высоту до нуля и получить тот же визуальный результат, и поскольку вы не скрываете нижний колонтитул, у него все равно будет такое же смещение top

Ответ 5

Я бы порекомендовал просто поместить небольшой буфер между прокруткой вверх и прокруткой вниз кода.

Я сделал небольшую настройку для вашего кода, чтобы поместить в буфер 100px:

Javascript

$(window).scroll(function() {

    var distanceTop = $('#showfootershop').offset().top - $(window).height();

    if ($(window).scrollTop() >= distanceTop) {
        $("#footershop").slideDown();
    }
    else if ($(window).scrollTop() < (distanceTop - 100)) {
        $("#footershop").slideUp();
    }
});

Демо

Ответ 6

Попытка прокрутки к элементу слишком грязная, просто используйте нижнюю часть страницы.

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        $("#footershop").slideDown();
    }
    else {
        $("#footershop").slideUp();
    }
});​

jsfiddle