Прокрутка анимации не работает на прокрутке вверх

Question

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

посмотрите на jsfiddle, прокрутите вниз, затем прокрутите вверх, чтобы заголовок скользил, как будто он скользнул. По умолчанию ссылки теперь исчезли до обновления.

Я обновил все мой код здесь https://jsfiddle.net/r9bdrker/24/

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

STATUS UPDATE

ОК я вычислил проблему, но необходимо, чтобы выяснить, как это исправить, его мой JQuery код здесь является обновленной версией

(function($) {   
    $(document).ready(function(){      
     $(window).scroll(function(){       
      if ($(this).scrollTop() > 250) { 
       $('.header').addClass('fixed').addClass('active').removeClass('offset');        
       } else { 
       $('.header').removeClass('fixed').removeClass('active'); 
      } 
     }); 
    }); 
})(jQuery); 



$(document).ready(function(){ 
    $(this).scrollTop()>0; 
}); 



(function($) {   
    $(document).ready(function(){      
     $(window).scroll(function(){       
      if ($(this).scrollTop() > -5) { 
       $('.header').addClass('active').addClass('offset'); 
      } 
     }); 
    }); 
})(jQuery); 

при открытии страницы класс

DIV должен быть класс = «заголовок активного смещения» при прокрутке вниз класс должен быть класс = «заголовок активного фиксированным» и при прокрутке вверх он должен вернуться по умолчанию «заголовок активного смещения»

, но его не состояние по умолчанию является «заголовок активного» должен быть «заголовок активного смещения»

при прокрутке это «заголовок активного неподвижную» но его показ «заголовокctive фиксированного смещение» прокрутки

Answer 1

Ваш CSS отлично, я переработал свой JQuery немного.

(function($) { 

    var header = $('.header'); 

    $(window).scroll(function() { 
    if ($(this).scrollTop() > 300) { 
     header.addClass('fixed active').off('transitionend'); 
     header.removeClass('offset').off('transitionend'); 
    } else if (header.hasClass('active')) { 
     header.removeClass('active offset').one('transitionend', function() { 
     header.removeClass('fixed'); 
      header.addClass('active offset'); 
     }); 
    } 
    }).scroll(); 

})(jQuery); 


$(document).ready(function(){ 
    $(this).scrollTop(0); 
    $('.header').addClass('active'); 
    $('.header').addClass('offset'); 
}); 

Answer 2

Вы должны добавить стиль перехода к CSS, как этот transition: all 2s; к .fixed селектору Это гарантирует, что любое применяются новое правило требуется время, чтобы получить применяется. Вместо all вы можете указать конкретное свойство, которое вы хотите преобразовать. Проверка http://www.w3schools.com/css/css3_transitions.asp для получения более подробной информации

Answer 3

Проблема заключается в том, что в JS вы добавляете и удаляете оба класса .fixed и .active.

Основываясь на вашем CSS, вы действительно хотите .fixed по элементу в HTML и добавить/удалить .active только в JS.

if ($(this).scrollTop() > 350) { 
    $('.header').addClass('active'); 
} else { 
    $('.header').removeClass('active'); 
} 

Тогда вам также понадобится ваш transition на .fixed класса

.header.fixed { 
    transition: transform .5s ease; 
} 

Demo: https://jsfiddle.net/hrzh9Lsc/