Ich versuche, div beim Scrollen von unten nach oben und von oben nach unten zuletzt sollte es zeigen div aber ein Problem tritt auf die eine oder das andere Bild ist so aussehen -Scroll div verstecken/zeigen mit ID/Klasse
die Methode i ist dies ist mit:
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$("div.nav-down").fadeOut();
}
else
{
$("div.nav-down").fadeIn();
}
});
ich konnte es mit der beseelten Funktion tun, anstatt den fadeOut und fadeIn ein (es erscheint nur, wenn auf der absoluten unten die Seite):
$(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>Hope it
ja seine Arbeits wie erwartet '$ (Fenster) .scroll (function() { \t var scrollTop = $ (this) .scrollTop();. \t if (scrollTop> 0) { \t \t $ (“ NAV- down ") stop() animieren ({ \t \t \t Opazität:.. "1", Höhe: "50px" \t \t}); \t} else { \t \t $ (". nav-down ") .stop(). animate ({ \t \t \t Opazität: "0", Höhe: "0px" \t \t}); } }); 'aber ich möchte ausblenden, wenn von unten nach oben scrollen und wenn von oben nach unten sollte es zeigen, wie ich diese scrollTop> 0 verwendet wurde, arbeitete es von oben nach unten, aber von unten nach oben bleibt es immer noch – rinki
Ich habe gerade einen kleinen Schnitt gemacht, also erscheint er nur, wenn ich ganz unten weiß, ob du es bemerkt hast. –
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>hilft Wenn ich Missverständnis, erklären Sie mir bitte
ja, aber ich möchte es ausblenden, wenn Sie oben von unten scrollen und zu zeigen, wenn unten jedes Mal erreicht, in Ihrem Code erscheint es, wenn ich blättern immer Scroll – rinki
I Aktualisiere einfach den Code, hoffe, diesmal kann ich es richtig machen: P –
sind Sie sicher, dass Ihre '$ (Fenster) Spirale (' funktioniert Wenn nicht versuchen Sie dies ' window.onscroll' – psycho
Und welche Art von Problem Sie bekommen ... bitte stellen Sie einige von ihnen. – psycho
eigentlich möchte ich div am unteren zeigen und nach dem scrollen für top sollte es verstecken, was nicht passiert. – rinki