Afficher div sur scrollDown après 800px
je veux montrer une div cachée en faisant défiler vers le bas après 800px du haut de la page. Maintenant j'ai cet exemple, mais je suppose qu'il doit être modifié afin d'arriver à ce que je recherche.
EDIT:
[Et quand scrollUp et la hauteur est de moins en moins le 800px, cette division doit masquer]
HTML:
<div class="bottomMenu">
<!-- content -->
</div>
css:
.bottomMenu {
width: 100%;
height: 60px;
border-top: 1px solid #000;
position: fixed;
bottom: 0px;
z-index: 100;
opacity: 0;
}
$(document).ready(function() {
$(window).scroll( function(){
$('.bottomMenu').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
voici un violon de mon code actuel.
4 réponses
si vous souhaitez afficher une div après avoir défilé un certain nombre de pixels:
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
body {
height: 1600px;
}
.bottomMenu {
display: none;
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Scroll down... </p>
<div class="bottomMenu"></div>
C'est simple, mais efficace.
Documentation pour .défilement()
Documentation pour .scrollTop ()
si vous souhaitez afficher un div après avoir défilé un nombre de pixels,
sans jQuery:
myID = document.getElementById("myID");
var myScrollFunc = function() {
var y = window.scrollY;
if (y >= 800) {
myID.className = "bottomMenu show"
} else {
myID.className = "bottomMenu hide"
}
};
window.addEventListener("scroll", myScrollFunc);
myID = document.getElementById("myID");
var myScrollFunc = function() {
var y = window.scrollY;
if (y >= 800) {
myID.className = "bottomMenu show"
} else {
myID.className = "bottomMenu hide"
}
};
window.addEventListener("scroll", myScrollFunc);
body {
height: 2000px;
}
.bottomMenu {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
transition: all 1s;
}
.hide {
opacity: 0;
left: -100%;
}
.show {
opacity: 1;
left: 0;
}
<div id="myID" class="bottomMenu hide"></div>
Documentation pour .scrollY
Documentation pour .nom de la classe
Documentation pour .addEventListener
si vous voulez montrer un élément après avoir défilé vers lui:
$('h1').each(function () {
var y = $(document).scrollTop();
var t = $(this).parent().offset().top;
if (y > t) {
$(this).fadeIn();
} else {
$(this).fadeOut();
}
});
$(document).scroll(function() {
//Show element after user scrolls 800px
var y = $(this).scrollTop();
if (y > 800) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
// Show element after user scrolls past
// the top edge of its parent
$('h1').each(function() {
var t = $(this).parent().offset().top;
if (y > t) {
$(this).fadeIn();
} else {
$(this).fadeOut();
}
});
});
body {
height: 1600px;
}
.bottomMenu {
display: none;
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
.scrollPast {
width: 100%;
height: 150px;
background: blue;
position: relative;
top: 50px;
margin: 20px 0;
}
h1 {
display: none;
position: absolute;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Scroll Down...</p>
<div class="scrollPast">
<h1>I fade in when you scroll to my parent</h1>
</div>
<div class="scrollPast">
<h1>I fade in when you scroll to my parent</h1>
</div>
<div class="scrollPast">
<h1>I fade in when you scroll to my parent</h1>
</div>
<div class="bottomMenu">I fade in when you scroll past 800px</div>
notez que vous ne pouvez pas obtenir le décalage des éléments défini à display: none;
, saisissez le décalage du parent de l'élément à la place.
de la Documentation .chaque()
Documentation pour .parent()
Documentation pour .offset()
si vous voulez pour avoir un nav ou div bâton ou dock en haut de la page une fois que vous faites défiler à elle et unstick/undock lorsque vous faites défiler vers le haut:
$(document).scroll(function () {
//stick nav to top of page
var y = $(this).scrollTop();
var navWrap = $('#navWrap').offset().top;
if (y > navWrap) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
});
#navWrap {
height:70px
}
nav {
height: 70px;
background:gray;
}
.sticky {
position: fixed;
top:0;
}
$(document).scroll(function () {
//stick nav to top of page
var y = $(this).scrollTop();
var navWrap = $('#navWrap').offset().top;
if (y > navWrap) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
});
body {
height:1600px;
margin:0;
}
#navWrap {
height:70px
}
nav {
height: 70px;
background:gray;
}
.sticky {
position: fixed;
top:0;
}
h1 {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas,
imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum
oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<div id="navWrap">
<nav>
<h1>I stick to the top when you scroll down and unstick when you scroll up to my original position</h1>
</nav>
</div>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas,
imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum
oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
il se passe des choses. L'un, pourquoi une classe? Vous en avez plusieurs sur la page? La CSS suggère que vous ne pouvez pas. Si ce n'est pas le cas, vous devriez utiliser un ID - il est plus rapide de sélectionner à la fois dans CSS et jQuery:
<div id=bottomMenu>You read it all.</div>
Deuxièmement, vous avez quelques choses folles en cours dans ce CSS - en particulier le z-index est censé être juste un nombre, non mesuré en pixels. Il spécifie sur quelle couche cette balise est, où chaque nombre supérieur est plus proche de la utilisateur (ou mettez une autre façon, sur le dessus de/occluding tags avec des z-indexes inférieurs).
L'animation que vous essayez de faire est fondamentalement .fadeIn (), il suffit donc de configurer le div pour afficher: none; initialement et utiliser .fadeIn () pour l'animer:
$('#bottomMenu').fadeIn(2000);
.fadeIn () fonctionne en faisant d'abord display: (quelle que soit la propriété display appropriée pour l'étiquette), opacity: 0, puis progressivement ratcheting up the opacity.
Plein de travail exemple:
http://jsfiddle.net/b9chris/sMyfT /
CSS:
#bottomMenu {
display: none;
position: fixed;
left: 0; bottom: 0;
width: 100%; height: 60px;
border-top: 1px solid #000;
background: #fff;
z-index: 1;
}
JS:
var $win = $(window);
function checkScroll() {
if ($win.scrollTop() > 100) {
$win.off('scroll', checkScroll);
$('#bottomMenu').fadeIn(2000);
}
}
$win.scroll(checkScroll);
vous pouvez aussi le faire.
$(window).on("scroll", function () {
if ($(this).scrollTop() > 800) {
#code here
} else {
#code here
}
});
BARRES de défilement et $(window).scrollTop()
ce que j'ai découvert est que l'appel d'une telle fonctionnalité comme dans la solution heureusement fournie ci - dessus, (il y a beaucoup plus d'exemples de cela tout au long de ce forum-qui tout fonctionne bien) est seulement réussie lorsque les barres de défilement sont effectivement visibles et opérationnelles.
si (comme je l'ai peut-être essayé bêtement), vous souhaitez mettre en œuvre une telle fonctionnalité, et vous le souhaitez aussi, dirons-nous, mettre en œuvre un "écran propre" minimaliste exempt de barres de défilement, comme à cette discussion , puis $(window).scrollTop()
ne fonctionnera pas.
c'est peut-être une programmation fondamentale, mais j'ai pensé que j'offrirais le heads up à n'importe quel autre newbies, comme j'ai passé un long moment à comprendre cela.
si quelqu'un peut offrir quelques conseils sur la façon de surmonter ceci ou un peu plus de perspicacité, n'hésitez pas à répondre, comme j'ai dû recourir à afficher/masquer onmouseover/mouseleave au lieu de ici
de Vivre longtemps et de programme, CollyG.