Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

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

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

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

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

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

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

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

Сам я в Javascript понимаю ещё меньше, чем совсем ничего. Тем не менее, в результате пары дней поиска по инету слепил небольшой код, который привожу ниже, но в нём недостаёт одного важного элемента. Я так и не смог найти функцию (или селектор, или как оно правильно называется), которая бы позволила определить расстояние до конца страницы, поэтому решил пойти проще: использовать scrollHeight и pageYOffset. Т.е. как только pageYOffset становится >= 70% от scrollHeight - нашему элементу присваивается стиль display.none
Вот только никак не получается прикрутить это самое условие. Помогите, пожалуйста.
Код вот такой:

<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>
modest-bp вне форума   Ответить с цитированием
Старый 12.04.2018, 09:49   #2
Stanislav
Квадрокоптерист
Профессионал
 
Регистрация: 29.09.2007
Сообщений: 1,800
Репутация: 532
По умолчанию

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

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как закрепить Body при прокрутке turizmdukorem HTML и CSS 2 31.01.2017 13:57
Как реализовать эффекты при прокрутке skorosdohnesh Помощь студентам 0 25.12.2016 14: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


15:32.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru