6

我有一个 div ，像这样

  #footer
   {   position:fixed;
       left:40px;
       top:0px; 
   }

当我垂直或水平滚动时，位置是固定的。但是我希望当用户垂直滚动滚动条时 div 是固定的，但当用户水平滚动滚动条时应该会有所不同。

我看过一些论坛和帖子，但大多数情况下我发现了 jquery 脚本。我想知道是否有办法在 CSS 中做到这一点？

仅在一个方向上固定位置 我读了这篇文章，但我不理解 jquery 脚本。请让我知道在 css 中执行此操作的方法或使用 jquery 执行此操作的更好方法。谢谢

4

4 回答 4

6

似乎不可能仅使用 CSS/HTML 来获得这种“看起来不错”。正如Ruup所说或仅在一个方向上的固定位置所提到的，在 JS 上分层是一个不错的选择。

幸运的是，我找到了一种让它以某种方式工作的方法（不是那么漂亮）： //jsfiddle.net/MKEbW/5/

HTML（在正文标签内）：

<div id="simulated-html">
    <div id="footer">
        <span>
            <!-- Footer text here -->
        </span>
    </div>
    <div id="simulated-body">
        <!-- Your website here -->
    </div>
</div>

CSS：

* { margin:0; padding:0; }

html {
    font: 12px/1.5em Georgia;
}
p { padding: 5px; }

html, body {
    height: 100%;
    overflow: hidden; /* hide scrollbars, we create our own */
}

#simulated-html {
    background: orange;
    overflow-x: scroll; /* force horizontal scrollbars (optional) */
    overflow-y: hidden; /* hide. we use the #simulated-body for it. */
    position: relative; /* to align #footer on #simulated-html */
    height: 100%;
}

#simulated-body {
    overflow-y: scroll; /* force vertical scrollbars (optional) */
    overflow-x: hidden; /* hide. we use the #simulated-html for it. */
    height: 100%;
    background: #eee;

    /* use as a container */
    width: 450px;
    margin: 0 auto;
}

#footer {
    position: absolute;
    bottom: 0px; /* vertical align it to #simulated-html */
    width: 100%;
    background: red;
    z-index: 99; /* always show footer */
    color: white;
}
#footer span {
    width: 450px;
    margin: 0 auto;
    background: green;
    display: block;
}

似乎可以在 IE7+ 和现代浏览器中工作，通过 browserlab.adobe.com 进行测试。

在 Chrome 18 中使用滚动条、更小和更宽的视口进行了测试。

我建议对不支持的浏览器和/或 JS 解决方法进行后备。

于 2012-06-05T00:43:27.513 回答
1

对前面的代码有一个小修复。

用于水平移动固定 div 的更改 javascript 代码

$(window).scroll(function(){
  $('#footer').css('left',-$(window).scrollLeft());
});
于 2012-10-18T15:59:50.993 回答
1

链接的帖子正是您所需要的。您可以复制确切的脚本。

$(window).scroll(function(){
$('#footer').css('left','-'+$(window).scrollLeft());
});

div css 是这样的（当它有顶部 0px 时可能不是页脚：P 但没关系）

#footer
{  position:fixed;
   left:40px;
   top:0px; 
}

当您滚动 jquery 脚本时，只需将 left(x) 坐标调整为与窗口的 scrollLeft 相同的值。

于 2012-06-04T20:38:40.180 回答
0

how should the horizontal axis vary? the way this code is currently it would stay 40px from the left at all times. in order to make the left margin change position relative to the size of the window you must use percentages and negative margins. for instance, to center a fixed div:

     #centered { 
          height: 350px;
          top: 0;  
          position: fixed;
          width: 1024px; 
          left: 50%; 
          margin-left: -512px; 
          z-index: 9999;
          }

notice that your negative margin must be HALF the width of your div. if you want it 40px to the left of center then you would add another 40px to margin-left.

于 2012-06-04T20:34:39.137 回答