J'ai un élément qui est la position: fixe et fait donc défiler avec la page comment je le veux cependant. Lorsque l'utilisateur fait défiler l'écran vers le haut, l'élément doit cesser de défiler à un moment donné, par exemple, lorsqu'il se trouve à 250 pixels du haut de la page, est-ce possible? Toute aide ou conseil serait utile merci!
J'avais le sentiment qu'il faudrait utiliser jQuery pour le faire. J’ai essayé d’obtenir le défilement ou l’emplacement de l’utilisateur, mais j’ai été vraiment confus. Existe-t-il des solutions JQuery?
Voici un plugin rapide jQuery que je viens d'écrire qui peut faire ce dont vous avez besoin:
$.fn.followTo = function (pos) {
var $this = this,
$window = $(window);
$window.scroll(function (e) {
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
});
};
$('#yourDiv').followTo(250);
Voulez-vous dire un peu comme ça?
$(window).scroll(function(){
$("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});
$(window).scroll(function(){
$("#theFixed").css("top", Math.max(0, 100 - $(this).scrollTop()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="theFixed" style="position:fixed;top:100px;background-color:red">SOMETHING</div>
<!-- random filler to allow for scrolling -->
STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>
Voici un plugin complet jquery qui résout ce problème:
https://github.com/bigspotteddog/ScrollToFixed
La description de ce plugin est la suivante:
Ce plugin est utilisé pour fixer des éléments en haut de la page, si l'élément aurait défilé verticalement; Cependant, cela permet à l'élément de continuer à se déplacer à gauche ou à droite avec le défilement horizontal.
Avec une option marginTop, l'élément cessera de se déplacer verticalement vers le haut une fois que le défilement vertical a atteint la position cible. mais l'élément continuera à se déplacer horizontalement lorsque la page défilera à gauche ou à droite. Une fois que la page a été déplacée au-delà de la position cible, l'élément est restauré à sa position d'origine sur la page.
Ce plugin a été testé dans Firefox 3/4, Google Chrome 10/11, Safari 5 et Internet Explorer 8/9.
Utilisation pour votre cas particulier:
<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>
$(document).ready(function() {
$('#mydiv').scrollToFixed({ marginTop: 250 });
});
Vous pouvez faire ce que James Montagne a fait avec son code dans sa réponse, mais cela le fera clignoter en Chrome (testé en V19).
Vous pouvez résoudre ce problème si vous mettez "margin-top" au lieu de "top". Je ne sais pas vraiment pourquoi cela fonctionne avec la marge tho.
$(window).scroll(function(){
$("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});
Dans un projet, un en-tête est effectivement fixé au bas de l'écran lors du chargement de la page (il s'agit d'une application de dessin de sorte que l'en-tête se trouve en bas pour laisser un espace maximal à l'élément de la toile dans une fenêtre large).
J'avais besoin que le titre devienne "absolu" lorsqu'il atteint le pied de page en défilement, car je ne veux pas que le titre passe au-dessus du pied de page (la couleur du titre est la même que la couleur de fond du pied de page).
J'ai pris la réponse la plus ancienne ici (publiée par Gearge Millo) et cet extrait de code a fonctionné pour mon cas d'utilisation. Avec quelques jeux, ça a fonctionné. Maintenant, le titre fixe se trouve magnifiquement au-dessus du pied de page une fois qu'il atteint le pied de page.
Je pensais que je partagerais mon cas d'utilisation et son fonctionnement et que je vous dirais merci! L'application: http://joefalconer.com/web_projects/drawingapp/index.html
/* CSS */
@media screen and (min-width: 1100px) {
#heading {
height: 80px;
width: 100%;
position: absolute; /* heading is 'absolute' on page load. DOESN'T WORK if I have this on 'fixed' */
bottom: 0;
}
}
// jQuery
// Stop the fixed heading from scrolling over the footer
$.fn.followTo = function (pos) {
var $this = this,
$window = $(window);
$window.scroll(function (e) {
if ($window.scrollTop() > pos) {
$this.css( { position: 'absolute', bottom: '-180px' } );
} else {
$this.css( { position: 'fixed', bottom: '0' } );
}
});
};
// This behaviour is only needed for wide view ports
if ( $('#heading').css("position") === "absolute" ) {
$('#heading').followTo(180);
}
Une solution possible CSS SEULEMENT peut être obtenue avec position: sticky;
Le support du navigateur est réellement très bon: https://caniuse.com/#search=position%3A%20sticky
voici un exemple: https://jsfiddle.net/0vcoa43L/7/
J'ai écrit un billet de blog à ce sujet qui comportait cette fonction:
$.fn.myFixture = function (settings) {
return this.each(function () {
// default css declaration
var elem = $(this).css('position', 'fixed');
var setPosition = function () {
var top = 0;
// get no of pixels hidden above the the window
var scrollTop = $(window).scrollTop();
// get elements distance from top of window
var topBuffer = ((settings.topBoundary || 0) - scrollTop);
// update position if required
if (topBuffer >= 0) { top += topBuffer }
elem.css('top', top);
};
$(window).bind('scroll', setPosition);
setPosition();
});
};
ma solution
$(window).scroll(function(){
if($(this).scrollTop()>425) {
$("#theRelative").css("margin-top",$(this).scrollTop()-425);
} else {
$("#theRelative").css("margin-top",$(this).scrollTop()-0);
}
});
});
Une solution utilisant Mootools Framework.
http://mootools.net/docs/more/Fx/Fx.Scroll
Obtenir la position (x & y) de l'élément où vous voulez arrêter le défilement En utilisant $ ('myElement'). GetPosition (). X
$ ('myElement'). getPosition (). y
Pour une sorte d'animation, utilisez le défilement:
new Fx.Scroll ('scrollDivId', {offset: {x: 24, y: 432}}). toTop ();
Pour définir le défilement immédiatement, utilisez:
new Fx.Scroll (myElement) .set (x, y);
J'espère que cela t'aides !! :RÉ
J'ai aimé cette solution
$(window).scroll(function(){
$("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});
mon problème était que je devais traiter avec une position relative conteneur dans Adobe Muse.
Ma solution:
$(window).scroll(function(){
if($(this).scrollTop()>425) {
$("#theRelative").css("margin-top",$(this).scrollTop()-425);
}
});
J’ai adoré la réponse de @james mais j’étais à la recherche de son inverse, c’est-à-dire d’arrêter la position fixe juste avant le pied de page, voici ce que j’ai trouvé
var $fixed_element = $(".some_element")
if($fixed_element.length){
var $offset = $(".footer").position().top,
$wh = $(window).innerHeight(),
$diff = $offset - $wh,
$scrolled = $(window).scrollTop();
$fixed_element.css("bottom", Math.max(0, $scrolled-$diff));
}
Alors maintenant, l'élément fixe s'arrête juste avant le pied de page. et ne se chevaucheront pas avec elle.
J'ai adapté la réponse de @ mVchr et je l'ai inversée pour l'utiliser pour le positionnement des annonces collantes: si vous avez besoin de la positionner absolument (défilement) jusqu'à ce que l'en-tête des en-têtes ne soit plus affiché à l'écran, mais vous en avez ensuite besoin pour rester affiché à l'écran:
$.fn.followTo = function (pos) {
var stickyAd = $(this),
theWindow = $(window);
$(window).scroll(function (e) {
if ($(window).scrollTop() > pos) {
stickyAd.css({'position': 'fixed','top': '0'});
} else {
stickyAd.css({'position': 'absolute','top': pos});
}
});
};
$('#sticky-ad').followTo(740);
CSS:
#sticky-ad {
float: left;
display: block;
position: absolute;
top: 740px;
left: -664px;
margin-left: 50%;
z-index: 9999;
}
Juste le code mVChr improvisé
$(".sidebar").css('position', 'fixed')
var windw = this;
$.fn.followTo = function(pos) {
var $this = this,
$window = $(windw);
$window.scroll(function(e) {
if ($window.scrollTop() > pos) {
topPos = pos + $($this).height();
$this.css({
position: 'absolute',
top: topPos
});
} else {
$this.css({
position: 'fixed',
top: 250 //set your value
});
}
});
};
var height = $("body").height() - $("#footer").height() ;
$('.sidebar').followTo(height);
$('.sidebar').scrollTo($('html').offset().top);