Je souhaite placer un élément en bas de page lorsque l'utilisateur fait défiler la page. C'est comme "position fixe" mais je ne peux pas utiliser "position : fixed" css car beaucoup de navigateurs de mes clients ne le supportent pas.
J'ai remarqué que jquery peut obtenir la position supérieure de la fenêtre actuelle, mais comment puis-je obtenir le bas de la fenêtre de défilement ?
Je me demande donc comment savoir : $(window).scrollBottom()
On pourrait penser que si c'est aussi simple que cela, cela pourrait être inclus dans le core framework comme .scrollBottom(). Étrange
Défilement Top est le nombre de pixels verticaux du document Top vers la fenêtre visible Top . A l'opposé du défilement Top , défilement Bottom doit mesurer le nombre de pixels verticaux du document Bottom à la fenêtre visible Bottom (voir la réponse d'Alfred ci-dessous). Ce que este donne le nombre de pixels verticaux du document _top_ à la fenêtre visible Bottom . C'est utile, c'est certain, mais on ne peut pas dire que ce soit le contraire de ScrollBottom (je sais que c'est une réponse marquée, mais pour les futurs lecteurs comme moi).
Cette solution ne fonctionnera pas si la distance par rapport au sommet peut varier. Par exemple, si j'ai une <div> qui doit se trouver à une certaine distance du bas de la page et que la page comporte des éléments extensibles/collapsibles, cela va modifier la hauteur du corps et donc la distance par rapport au bas.
Je dirais que le scrollBottom devrait être l'opposé direct du scrollTop :
var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();Voici un petit test qui fonctionne pour moi :
// SCROLLTESTER START //
var showerEl = $('<h1 id="st" style="position: fixed; right: 25px; bottom: 25px;"></h1>')
showerEl.insertAfter('body');
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
var scrollBottom = $(document).height() - $(window).height() - scrollTop;
showerEl.html('scrollTop: ' + scrollTop + '<br>scrollBottom: ' + scrollBottom);
});
// SCROLLTESTER END //
Pour l'avenir, j'ai fait de scrollBottom un plugin jquery, utilisable de la même manière que scrollTop (c'est-à-dire que vous pouvez définir un nombre et il fera défiler cette quantité à partir du bas de la page et renverra le nombre de pixels à partir du bas de la page, ou renverra le nombre de pixels à partir du bas de la page si aucun nombre n'est fourni).
$.fn.scrollBottom = function(scroll){
if(typeof scroll === 'number'){
window.scrollTo(0,$(document).height() - $(window).height() - scroll);
return $(document).height() - $(window).height() - scroll;
} else {
return $(document).height() - $(window).height() - $(window).scrollTop();
}
}
//Basic Usage
$(window).scrollBottom(500);
Le texte défilera jusqu'en haut de l'écran :
$(window).animate({scrollTop: 0});Le texte défilera jusqu'au bas de la page :
$(window).animate({scrollTop: $(document).height() + $(window).height()});modifier la fenêtre en fonction de l'identifiant ou de la classe du conteneur souhaité, si nécessaire (entre guillemets).
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
