web-dev-qa-db-fra.com

Afficher div sur scrollDown après 800px

Je veux montrer un div caché en faisant défiler après 800px du haut de la page. A présent, j’ai cet exemple, mais j’imagine qu’il faut le modifier pour obtenir ce que je recherche.

MODIFIER:

[Et quand scrollUp et la hauteur est inférieure à 800px, cette div 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;
}

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 Fiddle de mon code actuel.

jqueryhtmlcss
65
AndrewS

Si vous souhaitez afficher une div après avoir fait défiler un 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 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 que vous ne pouvez pas définir le décalage des éléments sur display: none;, utilisez plutôt le décalage du parent de l'élément.

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

Si vous voulez avoir un bâton de navigation ou de div ou un dock en haut de la page après l'avoir fait défiler et décocher/désancrer lorsque vous faites défiler 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>
187
apaul

Vous avez quelques choses à faire là-bas. Un, pourquoi un cours? Avez-vous réellement plusieurs de ceux-ci sur la page? Le CSS suggère que vous ne pouvez pas. Sinon, vous devriez utiliser un identifiant - il est plus rapide de sélectionner à la fois en CSS et jQuery:

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

Deuxièmement, il y a quelques trucs fous dans ce CSS - en particulier, le z-index est supposé être juste un nombre, pas mesuré en pixels. Il spécifie le calque sur lequel se trouve cette balise, où chaque chiffre le plus élevé est le plus proche de l'utilisateur (ou autrement, au-dessus des balises/occluding avec des indices z plus faibles).

L'animation que vous essayez de faire est fondamentalement .fadeIn (), il suffit donc de définir la div pour afficher: none; initialement et utilisez .fadeIn () pour l’animer:

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

.fadeIn () fonctionne d'abord en affichant: (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);
8
Chris Moschini

Vous pouvez aussi faire ceci.

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

SCROLLBARS & $(window).scrollTop()

Ce que j’ai découvert c’est que le fait d’appeler une telle fonctionnalité, comme heureusement dans la solution fournie ci-dessus (il existe de nombreux autres exemples tout au long de ce forum - qui fonctionnent tous bien), n’est efficace que lorsque les barres de défilement sont réellement visibles et fonctionnent.

Si (comme je l'ai peut-être essayé bêtement), vous souhaitez implémenter une telle fonctionnalité, et vous souhaitez également, dirons-nous, implémenter un "écran propre" minimaliste exempt de barres de défilement, tel que cette discussion, alors $(window).scrollTop() ne fonctionnera pas.

C’est peut-être un principe fondamental de la programmation, mais j’avais l’idée de laisser la tête haute aux nouveaux débutants, car j’ai passé beaucoup de temps à comprendre cela.

Si quelqu'un peut offrir des conseils sur la façon de surmonter cela ou un peu plus de perspicacité, n'hésitez pas à répondre, car je devais recourir à afficher/masquer onmouseover/mouseleave à la place ici

Vivez longtemps et programmez, CollyG.

1
collyg