jQuery .hide() - скользящие элементы слева

Question

Я фиксирую свою навигацию в верхней части страницы. Я использую Bootstrap (только CSS). Я использую jQuery, чтобы скрыть один логотип (img учебный класс .logo) и показать другое (img учебный класс .logo-sm), на прокрутке.

Все в основном работает, кроме одной вещи. Функция скрытия сдвигает основной логотип влево, когда он исчезает, но я бы хотел, чтобы он скользил вверх. Я уверен, что это не .hide() Поведение функции по умолчанию, но я не очень хорошо знаю jQuery, поэтому не знаю, как это изменить.

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

JSFiddle

Сценарий:

$(document).ready(function() {
// nav fixing
$(window).scroll(function() {
    if ($(this).scrollTop() > 1){
        $(".logo").hide(100);
        $(".logo-sm").show(200);
    } else {
        $(".logo").show(100);
        $(".logo-sm").hide(200);
    }
});
});

Answer 1

$.hide() только устанавливает display элемента в none, Это не оживляет. Такое поведение, вероятно, вызвано наличием переходов в вашем CSS.

Если вы хотите анимировать элемент с помощью jQuery, вы можете использовать .slideUp() а также .slideDown(),

$(document).ready(function() {
    // nav fixing
    $(window).scroll(function() {
        if ($(this).scrollTop() > 1){
            $(".logo").slideUp(100);
            $(".logo-sm").slideDown(200);
        } else {
            $(".logo").slideUp(100);
            $(".logo-sm").slideDown(200);
        }
    });
});

Но в вашей скрипке происходит что-то еще, что вызывает некоторую странность, так что это не будет работать намного лучше. Я бы предложил не анимировать с помощью jQuery, но использовать его для изменения классов элементов и обработки анимации с помощью переходов CSS. Что-то вроде этого:

$(document).ready(function() {
    // nav fixing
    $(window).scroll(function() {
        if ($(this).scrollTop() > 1){
            $(".logo").removeClass("showing");
            $(".logo-sm").addClass("showing");
        } else {
            $(".logo-sm").removeClass("showing");
            $(".logo").addClass("showing");
        }
    });
});

А затем стиль .showing класс с переходами.

Answer 2

Это происходит потому, что.show() применяет display: inline-block, когда вам нужно это display: block.

Чтобы это исправить, вам нужно найти то, что устанавливает заголовочное значение.logo css, чтобы оно было встроенным, и измените его на блокировку. От jquery api, show установит для свойства display значение, которое было установлено изначально. В данном случае это встроенный блок, поэтому ваш логотип перемещается влево.