позиция фиксированная проблема - PullRequest
Новая
       5

позиция фиксированная проблема

2 голосов
/ 02 декабря 2010

Привет, у меня есть прототип базовой настройки страницы плавающей корзины в правом столбце страниц.

Что происходит, когда корзина попадает в верхнюю часть страницы, когда пользователь прокручивает, он применяет класс, который фиксирует свою позицию в верхней части экрана, пока пользователь снова не прокрутил ее до верхней части экрана.

Это прекрасно работает, кроме одного вопроса:

при изменении размера окна браузера таким образом, чтобы область просмотра была меньше ширины веб-страницы и горизонтальной прокрутки вправо - если вы затем прокрутите страницу вниз, корзина фиксирует свое положение так, чтобы она перекрывала правую часть страница!

Код, который я использую ниже, оценил бы любой совет. Заранее спасибо! 

<!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>

1 Ответ

2 голосов
/ 03 декабря 2010

Это делает трюк для вас: 

<!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>
...