Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.08.2020, 11:54
Кандидат Javascript-наук
Отправить личное сообщение для samdo Посмотреть профиль Найти все сообщения от samdo
 
Регистрация: 27.05.2017
Сообщений: 112

Появление при скролле и скрытие по клику
День добрый! Помогите по задачке, плиз: есть блок, который появляется/исчезает при скролле, также есть кнопка, чтобы его скрыть. При клике на это кнопку он скрывается, но если начинаем скроллить, то он опять появляется. Подскажите как сделать, чтобы он не появлялся при скролле если мы его закрыли кликом по кнопке. Вот код, которым я пытался это реализовать:

<div class="previous-post">
	<i class="fas fa-times prev-close"></i>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>
	$(document).ready(function(){
		$(window).scroll(function(){
			if($(window).scrollTop()>220){
				$('.previous-post').fadeIn(400)
			}else{
				$('.previous-post').fadeOut(400)
			}
		});
	})
	$(".prev-close").click(function() {
    $(".previous-post").slideToggle();
    $(this).hide();
	})
  </script>

<style>
.previous-post {
	display:none;
	position: fixed;
	right: 1%;
	bottom: 1%;
}
</style>
Ответить с цитированием
  #2 (permalink)  
Старый 12.08.2020, 12:17
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

$(window).one('scroll', ...


Если же это нужно запомнить навсегда или же на время сессии, то нужно запоминать состояние в локальном или сессионном хранилище браузера.
Ответить с цитированием
  #3 (permalink)  
Старый 12.08.2020, 12:22
Кандидат Javascript-наук
Отправить личное сообщение для samdo Посмотреть профиль Найти все сообщения от samdo
 
Регистрация: 27.05.2017
Сообщений: 112

Сообщение от laimas Посмотреть сообщение
$(window).one('scroll', ...


Если же это нужно запомнить навсегда или же на время сессии, то нужно запоминать состояние в локальном или сессионном хранилище браузера.
До первой перезагрузки страницы. Т.е. запоминается на то время, пока человек находится на этой странице.
Ответить с цитированием
  #4 (permalink)  
Старый 12.08.2020, 12:37
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от samdo
запоминается на то время, пока человек находится на этой странице
Ну значит так как написано.
Ответить с цитированием
  #5 (permalink)  
Старый 12.08.2020, 12:55
Кандидат Javascript-наук
Отправить личное сообщение для samdo Посмотреть профиль Найти все сообщения от samdo
 
Регистрация: 27.05.2017
Сообщений: 112

Что-то я по моему не так сделал)
$(document).ready(function(){
	$(window).one('scroll',function(){
			if($(window).scrollTop()>220){
				$('.previous-post').fadeIn(400)
			}else{
				$('.previous-post').fadeOut(400)
			}
		});
	})
Ответить с цитированием
  #6 (permalink)  
Старый 12.08.2020, 13:08
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Я не знаю как вам надо, а чтобы поставить обработчик события единожды для этого используют метод .one(). А с проверкой, это нужно следить постоянно и при условии выключать обработчик - метод .off(). Видимо это нужно.

Последний раз редактировалось laimas, 12.08.2020 в 13:11.
Ответить с цитированием
  #7 (permalink)  
Старый 12.08.2020, 13:13
Кандидат Javascript-наук
Отправить личное сообщение для samdo Посмотреть профиль Найти все сообщения от samdo
 
Регистрация: 27.05.2017
Сообщений: 112

Я добавил one (как выше я привёл), теперь блок при скролле не появляется) появляется только если я обновляю страницу, находясь внизу экрана.
Ответить с цитированием
  #8 (permalink)  
Старый 12.08.2020, 13:17
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Если надо не скролл отследить, а некую позицию его, то не обработчик на один раз нужно устанавливать, а установить обработку события scroll методом .on(), и по вашему условию удалить его методом .off().
Ответить с цитированием
  #9 (permalink)  
Старый 12.08.2020, 13:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

samdo,
заменить полностью на это
$(function() {
    var fn = function() {
        if ($(window).scrollTop() > 220) {
            $('.previous-post').stop().fadeIn(400)
        } else {
            $('.previous-post').stop().fadeOut(400)
        }
    }
    $(window).scroll(fn);
    $(".prev-close").click(function() {
        $(".previous-post").slideUp();
        $(window).off("scroll", fn);
    })
})

Последний раз редактировалось рони, 12.08.2020 в 13:53.
Ответить с цитированием
  #10 (permalink)  
Старый 12.08.2020, 13:34
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

А если быстро прокрутить, что будет со строками 4-6? Какой-то маразм во всем этом. Либо дошли до позиции, показали, задержка, скрыли и одновременно удалили обработчик. Либо хрен знает что хотят сделать, мало того, что это дерьмо всплывающее раздражает, так еще и мультик будет.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выполнение по клику и при загрузке Nikita21 jQuery 5 02.08.2016 11:49
Появление объекта по клику maximamus Элементы интерфейса 4 03.03.2016 19:28
hide navbar отступ сверху,как его прятать при скролле полностью а не на его Height? dadubinin jQuery 6 26.02.2016 01:23
Добавить класс при скролле Quark_ Javascript под браузер 1 16.02.2016 13:42
Появление текста при наведении курсора на ссылку Александра Элементы интерфейса 1 11.05.2009 00:22