Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 05.02.2018, 03:52   #1
modest-bp
Новичок
Джуниор
 
Регистрация: 05.02.2018
Сообщений: 1
По умолчанию Исчезающий при прокрутке блок на JS без JQuery

Здравствуйте!

Помогите, пожалуйста, решить следующую задачу:
делаю небольшой блок со стрелкой, смысл которой - показать, что на странице есть ещё контент ниже (чтобы дать людям подсказку поскроллить вниз). Разумеется, при достижении _почти_ конца страницы этот элемент должен исчезнуть, дабы зря не мозолить глаза.

Было бы совсем здорово, если бы при обратной прокрутке наверх этот блок не появлялся бы снова (ну да решить бы хотя бы и без этого).

Сразу скажу, что JQuery не подходит, поскольку при подключении библиотеки она вступает в адовый конфликт с установленным на сайте плагином Visual Composer. Так что нужен чистый код Javascript (разбираться с причиной конфликта - себе дороже).

Сам я в Javascript понимаю ещё меньше, чем совсем ничего. Тем не менее, в результате пары дней поиска по инету слепил небольшой код, который привожу ниже, но в нём недостаёт одного важного элемента. Я так и не смог найти функцию (или селектор, или как оно правильно называется), которая бы позволила определить расстояние до конца страницы, поэтому решил пойти проще: использовать scrollHeight и pageYOffset. Т.е. как только pageYOffset становится >= 70% от scrollHeight - нашему элементу присваивается стиль display.none
Вот только никак не получается прикрутить это самое условие. Помогите, пожалуйста.
Код вот такой:
[NO PARSE]
<script type="text/javascript">
window.onload = function() {
var Disappear = document.getElementById('elementToD isappear');
window.onscroll = function () {
if ( window.pageYOffset >= /*ВОТ СЮДА ВСТАВИТЬ ЗНАЧЕНИЕ, РАВНОЕ 70% ОТ ВЫСОТЫ ВСЕЙ СТРАНИЦЫ*/ ) {
Disappear.style.display = 'none';
} else {
Disappear.style.display = 'flex';
}
};
};
</script>
[/NO PARSE]
modest-bp вне форума Ответить с цитированием
Старый 12.04.2018, 08:49   #2
Stanislav
Квадрокоптерист
Участник клуба Подтвердите свой е-майл
 
Регистрация: 29.09.2007
Сообщений: 1,824
По умолчанию

Вот держите если не поздно конечно https://www.w3schools.com/howto/howt...oll_to_top.asp
Я часть той силы, что вечно хочет зла, но вечно совершает благо..
Stanislav вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как закрепить Body при прокрутке turizmdukorem HTML и CSS 2 31.01.2017 12:57
Как реализовать эффекты при прокрутке skorosdohnesh Помощь студентам 0 25.12.2016 13:39
Фиксация блока при вертикальной прокрутке ВалекFCRK HTML и CSS 2 27.03.2014 16:06
Фиксация картинки при прокрутке tarakanet HTML и CSS 0 20.07.2012 01:14
цикл останавливается при прокрутке страницы vasser200189 Microsoft Office Excel 1 16.05.2012 13:26