Jump to content

Jquery scroll ( stoper le scroll au dessus du footer)


 Share

Recommended Posts

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 ?

post-166345-0-16673100-1346052826_thumb.png

Edited by jokoss (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More