12.08.2020, 11:54
|
Кандидат Javascript-наук
|
|
Регистрация: 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>
|
|
12.08.2020, 12:17
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
$(window).one('scroll', ...
Если же это нужно запомнить навсегда или же на время сессии, то нужно запоминать состояние в локальном или сессионном хранилище браузера.
|
|
12.08.2020, 12:22
|
Кандидат Javascript-наук
|
|
Регистрация: 27.05.2017
Сообщений: 112
|
|
Сообщение от laimas
|
$(window).one('scroll', ...
Если же это нужно запомнить навсегда или же на время сессии, то нужно запоминать состояние в локальном или сессионном хранилище браузера.
|
До первой перезагрузки страницы. Т.е. запоминается на то время, пока человек находится на этой странице.
|
|
12.08.2020, 12:37
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Сообщение от samdo
|
запоминается на то время, пока человек находится на этой странице
|
Ну значит так как написано.
|
|
12.08.2020, 12:55
|
Кандидат Javascript-наук
|
|
Регистрация: 27.05.2017
Сообщений: 112
|
|
Что-то я по моему не так сделал)
$(document).ready(function(){
$(window).one('scroll',function(){
if($(window).scrollTop()>220){
$('.previous-post').fadeIn(400)
}else{
$('.previous-post').fadeOut(400)
}
});
})
|
|
12.08.2020, 13:08
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Я не знаю как вам надо, а чтобы поставить обработчик события единожды для этого используют метод .one(). А с проверкой, это нужно следить постоянно и при условии выключать обработчик - метод .off(). Видимо это нужно.
Последний раз редактировалось laimas, 12.08.2020 в 13:11.
|
|
12.08.2020, 13:13
|
Кандидат Javascript-наук
|
|
Регистрация: 27.05.2017
Сообщений: 112
|
|
Я добавил one (как выше я привёл), теперь блок при скролле не появляется) появляется только если я обновляю страницу, находясь внизу экрана.
|
|
12.08.2020, 13:17
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Если надо не скролл отследить, а некую позицию его, то не обработчик на один раз нужно устанавливать, а установить обработку события scroll методом .on(), и по вашему условию удалить его методом .off().
|
|
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.
|
|
12.08.2020, 13:34
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
А если быстро прокрутить, что будет со строками 4-6? Какой-то маразм во всем этом. Либо дошли до позиции, показали, задержка, скрыли и одновременно удалили обработчик. Либо хрен знает что хотят сделать, мало того, что это дерьмо всплывающее раздражает, так еще и мультик будет.
|
|
|
|