Как удалить элемент DOM без перехода на страницу?

Question

Мне нужно удалить элемент из DOM без перехода на страницу.

Я пытался использовать фантомный элемент такой же высоты. Достигнув определенной позиции прокрутки, я попытался удалить свой элемент из DOM и настроить отображение элемента фантома. Это все еще вызывает мерцание как бы то ни было.

Липкая прокладка имеет высоту 1000 пикселей, а фантомная прокладка имеет высоту 0. Когда класс анимации завершен, фантомная прокладка отображается с высотой 1000 пикселей, а липкая прокладка имеет высоту 0.

jQuery('.phantom-container, .sticky-spacer').addClass('animation-done');

Я ожидал, что мое решение сработает, но я все еще вижу мерцание. Есть ли какой-нибудь надежный способ сделать это?

Метод, который я использовал, также находится в этой скрипке: http://jsfiddle.net/dgk17pq9/13/

Answer 1

Когда вы добавляете position: fixed к элементу, он удаляется со своего места и прикрепляет его вверху страницы. Остальная часть вашего контента подпрыгивает, потому что панель элементов больше не находится в том же месте.

Посмотрите на демонстрацию, которую я нашел: http://jsfiddle.net/1e1cg6t5/

Чтобы устранить проблему, вынужно динамически изменять классы css, которые управляют заполнением отдельных разделов, как в коде по ссылке выше:

if (scrollPos >= navPos) {
        $navBar.addClass('fixed');
    } else {
        $navBar.removeClass('fixed');
    }

где:

.nav-wrapper .nav {
    height: 80px;
    background: #333;
    padding: 0 40px;
    line-height: 80px;
    color: #FFF;
}

.nav-wrapper .nav.fixed {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    right: 0;
}

Надеюсь, это поможет:)

Answer 2

Не уверен насчет вашего точного кода, но я настроил вашу скрипку, и она, кажется, не имеет скачка или мерцания, даже если вы быстро прокручиваете.

Вот обновленная скрипка.

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

Вот пример кода из скрипки:

function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#content-anchor').offset().top;
  if (window_top > div_top) {
    $('#sticky').addClass('stick');
  } else {
    $('#sticky').removeClass('stick');
  }
}

$(function() {
  $(window).scroll(sticky_relocate);

  // Set the height of $sticky-phantom
  $('#sticky-phantom').height($('#sticky').outerHeight());

  sticky_relocate();
});