Question

Salut j'ai un prototype de mise en page de base d'un panier flottant dans les pages colonne de droite.

Qu'est-ce qui se passe est lorsque le panier touche le haut de la page en tant que utilisateur fait défiler, il applique une classe qui fixe sa position en haut de l'écran jusqu'à ce que l'utilisateur a une nouvelle fois fait défiler vers le haut de l'écran.

Cela fonctionne bien en dehors d'une question:

lorsque vous redimensionnez la fenêtre du navigateur pour que la fenêtre est plus petite que la largeur de la page Web et défilement horizontale vers la droite - si vous puis faites défiler la page du panier fixe sa position de sorte qu'il chevauche le côté droit de la la page!

code J'utilise est ci-dessous, serait apprreciate des conseils. Merci à l'avance! 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Untitled Document</title>

 <style type="text/css">
  #container{width: 900px; margin-left:auto; margin-right:auto;}
  #header{height:40px; background-color:blue; }
  #column1{float:left; width:600px; background-color:green; height:900px;}
  #column2{float:left; width:300px; background-color:red; height:900px; position:relative;}
  #basket{background-color:white;  margin-left:10px; margin-right:10px; width:280px;}
  .fixed{position:fixed; top:0;}
  /*#scrollWrapper{overflow-y:scroll; overrflow-x:hidden; height:50px;}*/
  #scrollWrapper{overflow:hidden;}
 </style>
 <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js" type="text/javascript"></script>
 <script type="text/javascript">
  YUI().use('node', function(Y){
   var basket = Y.one('#basket');
   var basketY = basket.getY();
   var overflow = Y.one('#scrollWrapper');

   function constrain()
   {
    var basketHeight = basket.getComputedStyle("height").split("px")[0];
    var windowHeight = Y.one("body").get("winHeight");
    if (basketHeight > windowHeight) {
     var diff = basketHeight - windowHeight;
     var scrollHeight = Y.one("#scrollWrapper").getComputedStyle("height").split("px")[0];
     var newHeight = scrollHeight - diff;

     overflow.setStyle("height", newHeight+"px");

    }
   }

   Y.on('scroll', function(e){
    var windowY = Y.DOM.docScrollY();
     //if(windowY > basketY && !basket.hasClass("fixed"))
     if(windowY > basketY)
     {
      basket.addClass("fixed");
      var height = Y.one("body").get("winHeight");
      //basket.setStyle("height", height+"px");
      constrain();

     }
     else if(windowY < basketY && basket.hasClass("fixed")){

      basket.removeClass("fixed");
      alert("removing");
     }

    });
  });





  /*window.onload = function(){
   var basket = document.getElementById("basket");
   alert(findPos(basket));
  }


  function findPos(obj)
  {
   var curTop = 0;
   if(obj.offsetParent){

    do {
     curTop += obj.offsetTop;
    }
    while (obj.offsetParent);
   }
   return curTop;
  }*/

 </script>
 </head>

 <body>
  <div id="container">
   <div id="header">

    Header
   </div>
   <div id="column1">

   </div>
   <div id="column2">
    <div id="basket" class="">
     hkjhkjkjhkjhkj
     klklkl;kl;kl
     <p>jhjkhkjhkj</p>
     <div id="scrollWrapper">
      <ul>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
       <li>Item1</li>
      </ul>
     </div>
    </div>
   </div>

  </div>

 </body>
</html>
Était-ce utile?

La solution

Est-ce que faire l'affaire pour vous: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Untitled Document</title>

 <style type="text/css">
  #container{width: 900px; margin-left:auto; margin-right:auto;}
  #header{height:40px; background-color:blue; }
  #column1{float:left; width:600px; background-color:green; height:900px;}
  #column2{float:left; width:300px; background-color:red; height:900px; position:relative;}
  #basket{background-color:white; margin-top:10px; margin-left:10px; margin-right:10px; width:280px;}
  .fixed{position:fixed; top:0; left:0; width:100%}
  /*#scrollWrapper{overflow-y:scroll; overrflow-x:hidden; height:50px;}*/
  #scrollWrapper{overflow:hidden;}
 </style>
 <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js" type="text/javascript"></script>
 <script type="text/javascript">
  YUI().use('node', function(Y){
   var basket = Y.one('#basket');
   var basketY = basket.getY();
   var basketCase = Y.one('#basketCase');
   var basketHolder = Y.one('#basketHolder');
   var overflow = Y.one('#scrollWrapper');

   function constrain()
   {
    var basketHeight = basket.getComputedStyle("height").split("px")[0];
    var windowHeight = Y.one("body").get("winHeight");
    if (basketHeight > windowHeight) {
     var diff = basketHeight - windowHeight;
     var scrollHeight = Y.one("#scrollWrapper").getComputedStyle("height").split("px")[0];
     var newHeight = scrollHeight - diff;

     overflow.setStyle("height", newHeight+"px");

    }
   }

   Y.on('scroll', fixBasket);
   Y.on('resize', fixBasket);

   function fixBasket(e){
    var windowY = Y.DOM.docScrollY();
     //if(windowY > basketY && !basket.hasClass("fixed"))
     if(windowY > basketY)
     {
      basketCase.addClass("fixed");
      basket.setStyle("marginLeft", 610 - document.body.scrollLeft + "px");
      basketHolder.setStyle("width", "900px");
      var height = Y.one("body").get("winHeight");
      //basket.setStyle("height", height+"px");
      constrain();

     }
     else if(windowY < basketY && basketCase.hasClass("fixed")){

      basketCase.removeClass("fixed");
      basket.setStyle("marginLeft", "10px");
      basketHolder.setStyle("width", "auto");
      //alert("removing");
     }

    }

  });


  /*window.onload = function(){
   var basket = document.getElementById("basket");
   alert(findPos(basket));
  }


  function findPos(obj)
  {
   var curTop = 0;
   if(obj.offsetParent){

    do {
     curTop += obj.offsetTop;
    }
    while (obj.offsetParent);
   }
   return curTop;
  }*/

 </script>
 </head>

 <body style="margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;">
  <div id="container">
   <div id="header">

    Header
   </div>
   <div id="column1">

   </div>
   <div id="column2">
    <div id="basketCase">
        <div id="basketHolder" style="margin: auto;">
            <div id="basket" class="">
             hkjhkjkjhkjhkj
             klklkl;kl;kl
             <p>jhjkhkjhkj</p>
             <div id="scrollWrapper">
              <ul>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
               <li>Item1</li>
              </ul>
             </div>
            </div>
        </div>
    </div>
   </div>

  </div>

 </body>
</html>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top