анимировать div из относительного положения в фиксированное с помощью jquery/css при прокрутке

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

Я использую путевые точки для функции прокрутки и использую jquery для добавления класса, затем я пытаюсь использовать анимацию css, чтобы заставить ее работать. Пока что цвет фона исчезает, а затем просто прыгает вправо. Я надеялся заставить его скользить. Любые идеи/помощь были бы потрясающими.

Вот мой код:

Путевые точки/jquery:

$('.course-list').waypoint(function(direction){
        if(direction === 'down'){
            $('.course-list').addClass('side-bar');
        } else {
            $('.course-list').removeClass('side-bar');
        }
    },{offset:'66px'});

Примечание. Я также пытался добавить продолжительность для добавления/удаления класса, но у меня это не сработало.

CSS:

section.content .introduction ul.course-list{position:relative;margin:0;padding:0;list-style:none;-webkit-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-o-transition: all 1.5s ease;transition: all 1.5s ease}

section.content .introduction ul.course-list.side-bar{-webkit-animation:slideRight 1.5s forwards;-moz-animation:slideRight 1.5s forwards;-o-animation:slideRight 1.5s forwards;animation:slideRight 1.5s forwards}

@-webkit-keyframes slideRight{
    to{position:fixed;top:0;bottom:0;right:0;background:#ff9}
}
@-moz-keyframes slideRight{
    to{position:fixed;top:0;bottom:0;right:0;background:#ff9}
}
@-o-keyframes slideRight{
    to{position:fixed;top:0;bottom:0;right:0;background:#ff9}
}
@keyframes slideRight{
    to{position:fixed;top:0;bottom:0;right:0;background:#ff9}
}

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

HTML:

<ul class="course-list">
    <li>Testing only</li>
    <li>Testing only</li>
    <li>Testing only</li>
    <li>Testing only</li>
    <li>Testing only</li>
</ul>

Скрипка:

https://jsfiddle.net/gpv38jsv/

(он настроен сделать это сразу, поэтому просто нажмите «Выполнить», и вы увидите прыжок)


jquery css css-animations jquery-waypoints
person Leanne Seawright    schedule 19.01.2018    source источник
comment
Добавлена ​​скрипка :) jsfiddle.net/gpv38jsv   -  person Leanne Seawright    schedule 19.01.2018
comment
position не является анимируемым свойством. Попробуйте использовать position:fixed в начале, а затем анимировать свойство left и right.   -  person Bhuwan    schedule 19.01.2018

Ответы (2)


arrow_upward
1
arrow_downward

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

$(window).scroll(function(e){
	if(this.scrollY > 66){
  	$('.course-list').addClass('side-bar');
    $('.course-list').css({top:this.scrollY})
  }else{
  	$('.course-list').removeClass('side-bar');
    $('.course-list').css({top:0})
  }
})
ul.course-list{
  position:relative;
  left:0;margin:0;padding:0;transition: all 1s linear;display:inline-block;right:auto;}

ul.course-list.side-bar{
  
  left:calc(100% - 200px);
}

body{
  height:1000000px;
  position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <ul class="course-list">
      <li>Testing only</li>
      <li>Testing only</li>
      <li>Testing only</li>
      <li>Testing only</li>
      <li>Testing only</li>
  </ul> 
</body>

person Nestor    schedule 19.01.2018

arrow_upward
0
arrow_downward

попробуй еще что-нибудь вроде этого

@keyframes slideRight{
    from{left:0;}
    to{left:100%;}
}

Сохраняйте простоту, и CSS сделает ее гладкой.

person John S    schedule 19.01.2018
comment
Он по-прежнему прыгает при переходе с position:relative на position:fixed - person Leanne Seawright; 19.01.2018
comment
скачка не вижу. Вы используете ту же скрипку, что и раньше? - person John S; 19.01.2018
comment
Э-э, мне пришлось внести изменения, чтобы заставить его работать, но он ничего не делает в Internet Explorer (я должен заставить его работать в разных браузерах, я знаю, что IE - это дерьмо). - person Leanne Seawright; 19.01.2018