当前位置： 文江博客话题详情

位置固定问题

发布于 2024-10-05 20:52:50 字数 4235 浏览 0 评论 0原文

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

发生的情况是，当用户滚动时购物篮到达页面顶部时，它会应用一个类，将其位置固定到屏幕顶部，直到用户再次滚动到屏幕顶部。

除了一个问题之外，这种方法工作得很好：

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

我正在使用的代码如下，希望得到任何建议。提前致谢！

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

Hi I have a basic page setup prototype a floating basket in the pages right column.

What happens is when the basket hits the top of the page as a user scrolls it applies a class which fixes its position to the top of the screen until the user has once again scrolled to top of screen.

This works fine apart from one issue:

when you resize the browser window so that the viewport is smaller than the width of the webpage and horizontal scroll to the right - if you then scroll down the page the basket fixes its position so that it overlaps the right hand side of the page!

Code I am using is below, would apprreciate any advice. Thanks in advance!

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

温馨耳语 2024-10-12 20:52:50

这对你有用吗：

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

Does this do the trick for you:

<!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>
回复 原文
~没有更多了~

关于作者

知你几分

暂无简介

0 文章
0 评论
21 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lioqio

文章 0 评论 0

Single

文章 0 评论 0

禾厶谷欠

文章 0 评论 0

alipaysp_2zg8elfGgC

文章 0 评论 0

qq_N6d4X7

文章 0 评论 0

放低过去

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文