Afficher la div sur le scrollDown après 800px

Question

Je souhaite afficher une div cachée lors du défilement vers le bas après 800px depuis le haut de la page. J'ai déjà cet exemple, mais je pense qu'il faut le modifier pour obtenir ce que je cherche.

EDIT :

[Et lorsque le scrollUp et la hauteur sont inférieurs à 800px, cette div doit être cachée].

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;
}

jQuery :

$(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.

Answer 1

Si vous souhaitez afficher une div après avoir fait défiler un certain nombre de pixels :

Exemple de travail

$(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 .scroll()
Documentation pour .scrollTop()

---

Si vous souhaitez afficher une div après avoir fait défiler un certain nombre de pixels,

sans jQuery :

Exemple de travail

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 .className
Documentation pour .addEventListener

---

Si vous souhaitez afficher un élément après l'avoir fait défiler :

Exemple de travail

$('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 qu'il n'est pas possible d'obtenir le décalage des éléments ayant pour valeur display: none; , prend le décalage du parent de l'élément à la place.

Documentation pour .each()
Documentation pour .parent()
Documentation pour .offset()

---

Si vous souhaitez qu'un élément de navigation ou un élément div soit collé ou ancré en haut de la page une fois que vous avez défilé jusqu'à lui et décollé/ancréré lorsque vous défilez à nouveau vers le haut :

Exemple de travail

$(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>

Answer 2

Il y a plusieurs choses qui se passent ici. Premièrement, pourquoi une classe ? En avez-vous vraiment plusieurs sur la page ? Le CSS suggère que ce n'est pas possible. Si ce n'est pas le cas, vous devriez utiliser un ID - c'est plus rapide à sélectionner à la fois en CSS et en jQuery :

<div id=bottomMenu>You read it all.</div>

Deuxièmement, il se passe des choses bizarres dans ce CSS - en particulier, le z-index est censé être un simple nombre, et non pas mesuré en pixels. Il indique la couche sur laquelle se trouve cette balise, où chaque chiffre plus élevé est plus proche de l'utilisateur (ou, en d'autres termes, au-dessus des balises dont l'indice z est plus faible).

L'animation que vous essayez de faire est essentiellement .fadeIn(), il suffit donc de mettre la div à display : none ; initialement et d'utiliser .fadeIn() pour l'animer :

$('#bottomMenu').fadeIn(2000);

.fadeIn() fonctionne en faisant d'abord display : (quelle que soit la propriété d'affichage appropriée pour la balise), opacity : 0, puis en augmentant progressivement l'opacité.

Exemple de travail complet :

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);

Answer 3

Vous pouvez également faire ceci.

$(window).on("scroll", function () {
   if ($(this).scrollTop() > 800) {
      #code here
   } else {
      #code here
   }
});

Answer 4

BARRES DE DÉFILEMENT & $(window).scrollTop()

Ce que j'ai découvert, c'est que l'appel à une telle fonctionnalité, comme dans la solution heureusement fournie ci-dessus (il y a beaucoup d'autres exemples de ce type dans ce forum - qui fonctionnent tous bien), ne réussit que lorsque les barres de défilement sont effectivement visibles et fonctionnent.

Si (comme je l'ai peut-être bêtement essayé), vous souhaitez mettre en œuvre une telle fonctionnalité, et que vous souhaitez également, disons, mettre en œuvre un "écran propre" minimaliste sans barres de défilement, comme à l'adresse suivante cette discussion entonces $(window).scrollTop() ne fonctionnera pas.

Il s'agit peut-être d'un élément fondamental de la programmation, mais j'ai pensé donner l'information à mes collègues débutants, car j'ai passé beaucoup de temps à comprendre ce qui se passait.

Si quelqu'un peut donner des conseils sur la façon de résoudre ce problème ou un peu plus d'informations, n'hésitez pas à répondre, car j'ai dû me contenter d'afficher/masquer au passage de la souris/à la sortie de la souris. ici

Vivez longtemps et programmez, CollyG.