Question

您好我在右侧页面中有一个基本的页面设置原型浮动篮子。

当用户滚动时，当篮子到达页面顶部时，会发生以下情况：应用一个类将其位置固定到屏幕顶部，直到用户再次滚动到屏幕顶部。

除了一个问题外，这项工作正常：

当您调整浏览器窗口大小以使视口小于网页宽度并向右水平滚动时 - 如果您向下滚动页面，则篮子会修复其位置，使其与右侧重叠页面！

我正在使用的代码如下，会收到任何建议。提前谢谢！

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

Answer 1

这是否适合您：

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

定位问题

1 个答案: