Прокрутка jquery не скрывается

Моя функция прокрутки не работает. Я хочу скрыть этот div.me, но он не работает

$(window).scroll(function() {
  if (scrollTop > 100) {
    $('.me').hide();
  }
});

html {
  min-height: 200%;
  background: grey;
}

.me {
  display: block;
  position: fixed;
  top: 50%;
  left: 40%;
  font-size: 1.4em;
  text-align: center;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<section id = "sec1" class = "all">
  <div class = "inner myself">
    <div class = "me">
      <span>Codepen</span>
      <p>Front end developer playground</p>
    </div>
  </div>
</section>

window.scrollTop() попробуйте это вместо scrollTopapi.jquery.com/scrollTop, и для хорошей меры вы можете console.info() значение scrollTop, чтобы дважды проверить возвращаемые значения ... console.info( window.scrollTop() );

— 19.03.2018 14:49

javascript jquery

19.03.2018 14:47

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Из-за того, что вы сравниваете function с number, это не удастся (вы также должны использовать jQuery Selector). Вам нужно вызвать метод (используя ()):

$(window).scroll(function(){
if ($(window).scrollTop() > 100){  // <-- here
    $('.me').hide();
}
});

html{
  min-height: 200%;
  background: grey;
}
.me{
  display: block;
  position: fixed;
  top: 50%;
  left: 40%;
  font-size: 1.4em;
  text-align: center;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id = "sec1" class = "all">
    <div class = "inner myself">
      <div class = "me">
        <span>Codepen</span>
        <p>Front end developer playground</p>
    </div>
    </div>
</section>

19.03.2018 14:51

Ответ принят как подходящий

Я почти уверен, что вы предпочли бы переключатель - и вы забыли сослаться на окно - здесь $(this).scrollTop(), поскольку мы находимся внутри события окна.

$(window).scroll(function() {
  $('.me').toggle($(this).scrollTop() <= 100)
});

html {
  min-height: 200%;
  background: grey;
}

.me {
  display: block;
  position: fixed;
  top: 50%;
  left: 40%;
  font-size: 1.4em;
  text-align: center;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<section id = "sec1" class = "all">
  <div class = "inner myself">
    <div class = "me">
      <span>Codepen</span>
      <p>Front end developer playground</p>
    </div>
  </div>
</section>

19.03.2018 14:57

в вашем методе вы должны назначить значение $(window).scrolltop() для scrollTop но вы можете напрямую использовать это так

$(window).scroll(function(){
if ($(window).scrollTop() > 100){
    $('.me').hide();
}
});

html{
  min-height: 200%;
  background: grey;
}
.me{
  position: fixed;
  top: 50%;
  left: 40%;
  font-size: 1.4em;
  text-align: center;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id = "sec1" class = "all">
    <div class = "inner myself">
      <div class = "me">
        <span>Codepen</span>
        <p>Front end developer playground</p>
    </div>
    </div>
</section>

@messerbill, я только что сделал, братан

— 19.03.2018 15:00

19.03.2018 14:58