Всем привет!!!
Сейчас я вам покажу самый простой способ добиться того, что-бы элемент появился на том моменте, пока кто либо сам не долистает до него.
Сначала я покажу сам код, а потом объясню, как он работает.
$('.txt1').slideUp(10);
var a = $('.txt1').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() >= a) {
$('.txt1').slideDown();
}
})
И так... Начнём! Для начала нам нужно скрыть сам объект, для этого я взял $('.txt1').slideUp(10), где:
$('.txt1') - класс нашего объекта(можно айди, если нужно)
.slideUp(10) - сворачиваем объект вверх со скоростью 10, то есть, моментально.
Дальше нам нужно определить, как низко у нас находиться объект. Для этого мы засунем в переменную var a - $('.block1').offset().top, где:
- $('.txt1') - наш класс объекта, которого определяем высоту.(так же можно написать вместо класса свой айди, но это на ваше усмотрение)
- .offset().top - определяет высоту от верхнего края объекта, до самого верха страницы.
Далее мы должны вызвать сам "Скролл", для этого нам поможет $(window).scroll(function () {}) - при каждом срабатывании скролла, он проверяет, что у него в функции и если это случилось, то выполняет.
Дальше мы должны сделать "Правду", то есть, если у нас что-то случилось, то это надо сделать. Для этого момента нам подойдёт if(){}. И теперь в нашу правду нужно засунуть "Если". Для данного случая возьмем $(window).scrollTop() >= a, где:
- $(window) - наше местоположение
- .scrollTop() - верхний край экрана
- >= - математическое действие "Больше или равно"
- a - наша переменная, куда мы засунули местоположение объекта.
И на последок само появление! Для этого на поможет $('.txt1').slideDown(). Выше я показал, как скрыть его, а этой командой мы делаем обратное.
Надеюсь, вы всё поняли, а если нет, то есть комментарии, задавайте любые вопросы.