Я пытаюсь скрыть div при прокрутке снизу вверх и сверху вниз, последним должен показать div, но какая-то проблема возникает в том или ином виде, как это выглядит:прокрутить div скрыть/показать с помощью id/class
метод я использую это:
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$("div.nav-down").fadeOut();
}
else
{
$("div.nav-down").fadeIn();
}
});
Я был в состоянии сделать это с помощью функции живого, а не FADEOUT и FadeIn один (он появляется только тогда, когда на абсолютный день страница):
$(window).scroll(function(){
\t var scrollTop = $(this).scrollTop();
\t if(scrollTop + $(this).height() == $(document).height()) {
\t \t $(".nav-down").stop().animate({
\t \t \t opacity: "1",
height: "50px"
\t \t });
\t } else {
\t \t $(".nav-down").stop().animate({
\t \t \t opacity: "0",
height: "0px"
\t \t });
\t }
});.wrapper {
width: 400px;
height: 300px;
}
.nav-down {
float: left;
width: 400px;
height: 50px;
background-color: red;
}
.lorum {
float: left;
width: 400px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="lorum">Example text to make it able to scroll up and down: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque augue augue, vestibulum nec convallis vitae, feugiat vel dui. Pellentesque consectetur justo magna. Lorem ipsum dolor sit amet, et auctor ex varius sit amet. Etiam et vulputate nulla. Donec ac leo</div>
<div class="nav-down">test</div>
<div class="lorum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque augue augue, vestibulum nec convallis vitae, feugiat vel dui. Pellentesque consectetur justo magna, et auctor ex varius sit amet. Etiam et vulputate nulla. Donec ac leo</div>
</div>Надеется, что это помогает
да его работы, как ожидается, '$ (окно) .scroll (функция() { \t вар scrollTop = $ (это) .scrollTop();. \t если (scrollTop> 0) { \t \t $ (» nav- вниз ") остановка() анимировать ({ \t \t \t непрозрачности:.. "1", высота: "50px" \t \t}); \t} Else { \t \t $ (". нав-вниз ") .stop(). animimate ({ \t \t \t непрозрачность: "0", высота: "0px" \t \t}); \t} }) ;, но я хочу скрыть при прокрутке снизу вверх, а сверху вниз - показывать, как я использовал этот scrollTop> 0, тогда он работал сверху донизу, но снизу вверх он все еще остается – rinki
Я просто сделал небольшое редактирование, поэтому оно появляется только в самом низу, я не знаю, заметили ли вы. –
if (scrollTop + $ (this) .height() == $ (document) .height()) –
let isScrolling = null;
const ponyElement = document.querySelector('#pony');
window.addEventListener("scroll", e => {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
ponyElement.classList.remove("hide");
}else{
ponyElement.classList.add("hide");
}
});*{
padding: 0em;
margin: 0em;
}
html{
background: skyblue;
}
#pony{
width: 10em;
position: fixed;
bottom: -3em;
left: 1em;
transition: all 0.3s ease;
}
#pony.hide{
bottom: -100vh;
}
#long{
height: 100em;
}<img id='pony' class='hide' src='https://s-media-cache-ak0.pinimg.com/originals/1c/b7/ca/1cb7caa5fe69d5210407b41b15297ff3.jpg' />
<div id='long'></div>Если я недоразумениям, пожалуйста, скажите мне
да, но я хочу скрыть его, когда прокручиваю сверху снизу и показывать, когда он достигнут снизу каждый раз, в вашем коде он появляется, когда я останавливаю прокрутку – rinki
I просто обновите код, надеюсь, что на этот раз я смогу исправить это: P –
вы уверены, что ваш '$ (окно) прокрутки (' работает Если вы не попробуете этот ' window.onscroll' – psycho
И какой вопрос вы получаете ... просьба предоставить некоторые из них. – psycho
На самом деле я хочу показать div на дне и после удара прокрутить вверх, он должен скрыть то, что не происходит. – rinki