Jquery scroll ( stoper le scroll au dessus du footer)

jokoss · August 24, 2012

Bonjour, j'ai trouvé un fichier tout fait (car je ne connais pas les script), pour fair suivre un bloc avec le scrollde la page. L'ennui est qu'il chevauche le footer, et j'aimerais qu'il s'arrête au dessus du footer. Il le fait sur le haut de page grâce à la balise " #body ".

Vous pouvez m'aider s'il vous plaît...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
#floating-box{
 width:90px;
 height:200px;
 border:1px solid red;
 background-color:#BBBBBB;
 float:left;
 margin-left:-100px;
 margin-right:10px;
 position:absolute;
 z-index:1;
}
#page{
 width:800px;
 margin:0 auto;
}
#header{
 border:1px solid blue;
 height:100px;
 margin:8px;
}
#body{
 border:1px solid blue;
 height:2400px;
 margin:8px;
}
#footer{
 border:1px solid blue;
 height:100px;
 margin:8px;
}
h1,h2{
 padding:16px;
}
</style>

</head>
<body>

 <div id="page">
  <div id="header"><h1>header</h1></div>

<div id="floating-box">

</div>

<div id="body">
 <h1>content</h1>
 <h2>Mashable floating effect example</h2>
</div>
<div id="footer"><h1>footer</h1></div>
 </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">

//avoid conflict with other script
$j=jQuery.noConflict();

$j(document).ready(function($) {

//this is the floating content
var $floatingbox = $('#floating-box');

if($('#body').length > 0){

  var bodyY = parseInt($('#body').offset().top) - 20;
  var originalX = $floatingbox.css('margin-left');

  $(window).scroll(function () {

var scrollY = $(window).scrollTop();
var isfixed = $floatingbox.css('position') == 'fixed';

if($floatingbox.length > 0){

   $floatingbox.html("srollY : " + scrollY + ", bodyY : "
								+ bodyY + ", isfixed : " + isfixed);

   if ( scrollY > bodyY && !isfixed ) {
  $floatingbox.stop().css({
 position: 'fixed',
 left: '50%',
 top: 10,
 marginLeft: -500
  });
 } else if ( scrollY < bodyY && isfixed ) {
  $floatingbox.css({
 position: 'relative',
 left: 0,
 bottom: 150,
 marginLeft: originalX
 });
  }
}
   });
 }
 });
</script>
</body>
</html>

SiteProjet · August 27, 2012

Bonjour.

Une screenshot?

Ce mashable est conçu pour être ajusté sur une distance parcourue à partir du header. Il faudrait modifier une grande partie du code pour obtenir l'effet inverse (c'est à dire rendre la position fixe à partir d'une certaine distance séparant du footer).

Une possibilité est de modifier le z-index de votre footer afin .u'il apparaisse systématiquement devant, ou à l'inverse celui du footer afin qu'il soit derrière.

Si vous souhaitez que le footer "s'arrête" peu avant le footer, là c'est plus délicat.

jokoss · August 27, 2012

Merci, en gros ca donnerait sa : le block cart à droite stoperait avant de toucher le footer... (image joint)

En fait il y a une fonction qui dit scroll le block à partir de la balise #body. Est-ce que ce serait possible de lui dire " arrète de scroller à partir de la balise #footer ?

Edited August 27, 2012 by jokoss (see edit history)

SiteProjet · August 27, 2012

A ma connaissance pas en l'état. Il faudrait repenser le code à l'envers pour cela.

Vous pouvez toujours tenter un aménagement.

Par exemple :

           if ( scrollY > bodyY && !isfixed ) {

en

           if ( scrollY > 1800 && !isfixed ) {

où "1800" correspond au nombre de pixels scrollés à partir du moment ou la position redevient "fixed", mais vous aurez plutôt une disparition du block (il remontera en haut de page).

Vous pouvez aussi essayer de laisser un commentaire sur le blog du développeur, sait-on jamais.

jokoss · August 28, 2012

Daccord, merci pour ton aide ;-) !!

Sign In

Jquery scroll ( stoper le scroll au dessus du footer)

Recommended Posts

jokoss

Link to comment

Share on other sites

SiteProjet

Link to comment

Share on other sites

jokoss

Link to comment

Share on other sites

SiteProjet

Link to comment

Share on other sites

jokoss

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com