scrollTop addclass делает прыжок - PullRequest
Новая
       9

scrollTop addclass делает прыжок

0 голосов
/ 13 ноября 2018

Я в значительной степени новичок в кодировании, и в настоящее время я работаю в компании в рамках моих исследований. Они дали мне html и css файл для редактирования, мне пришлось заставить изображение появляться и исчезать в зависимости от прокручиваемого расстояния. Мне удалось заставить класс исчезнуть после того, как они достигли конкретного расстояния от вершины, но это делает странный прыжок. Код не мой, я просто отредактировал некоторые вещи, поэтому, если какая-либо информация отсутствует, скажите мне, чтобы я мог добавить ее.

HTML выглядит так: 

jQuery("document").ready(function($){ 

var nav = $('#feedback_form'); 

$(window).scroll(function () { 
    if ($(this).scrollTop() > 445 && $(this).scrollTop() < 1289 ) { 
        nav.addClass("f-nav");
    } else { 
        nav.removeClass("f-nav");
    } 

});

И класс f-nav, на который он ссылается в css, это: 

.f-nav {
z-index: 9998!important;
position: fixed!important;
top: 0; 

-webkit-animation: fadeIn ease-in 1; /* Safari and Chrome */
-moz-animation: fadeIn ease-in 1; /* Firefox */
-ms-animation: fadeIn ease-in 1; /* Internet Explorer */
-o-animation: fadeIn ease-in 1; /* Opera */
animation: fadeIn ease-in 1;

-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;

}

addClass также делает скачок, но он менее заметен. Как я уже сказал, я довольно новичок в этом, поэтому я не знаю, откуда может возникнуть проблема.

Вот один вопрос к проблеме:

https://gyazo.com/9b3e0a910c095fa3b180b9501eed9981

Ответы [ 2 ]

0 голосов
/ 13 ноября 2018

Извините, что пишу код здесь. Я должен ответить еще раз: насчет $ (this), вы должны знать, что такое $ (this).Например: 

$(".ex").click(function(){
      $(this).addClass("example");
})

$ (это) выше означает $ (". Ex).

И изображения не следуют по прокрутке. Я думаю, что это из-за индекса z (возможно).

Так попробуйте это: 

if ($(window).scrollTop() > 445 || $("html").scrollTop() < 1289) {
  $("#feedback_form").fadeIn().addClass("myClass");
} else {
  $("#feedback_form").fadeOut();
};

с 

.myClass{
   position: fixed; /*add !important if you need*/
   z-index: 9999; /*add !important if you need*/
   width: 100%;
}
0 голосов
/ 13 ноября 2018

Попробуйте, это будет работать 

if ($(window).scrollTop() > 445 || $("html").scrollTop() > 289) {
  $("#feedback_form").fadeIn();
} else {
  $("#feedback_form").fadeOut();
};

Вы уверены, что в вашем коде объявлен $ (this)? Примите, если мой код работает, или дайте мне знать, если что-нибудь есть. Я могу вам помочь.

...