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

CSS jQuery positioning

拥有“位置：固定”的最简单的 jQuery 方法是什么？（始终在顶部）div？

发布于 2024-07-07 22:28:18 字数 283 浏览 8 评论 0 原文

我对 jQuery 比较陌生，但到目前为止我所看到的都是我喜欢的。我想要的是 div （或任何元素）位于页面顶部，就好像“position:fixed”在每个浏览器中都有效一样。

我不想要复杂的东西。我不想要巨大的 CSS hack。如果只使用 jQuery（版本 1.2.6）就足够了，我会更喜欢，但如果我需要 jQuery-UI-core，那也很好。

我试过 $("#topBar").scrollFollow(); <-- 但这进展缓慢......我希望某些东西看起来真正固定。

原文

分享到QQ

分享到微博

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

发布评论

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

雨的味道风的声音 2024-07-14 22:28:18

使用此 HTML：

<div id="myElement" style="position: absolute">This stays at the top</div>

这是您要使用的 javascript。它将一个事件附加到窗口的滚动，并将元素向下移动到您滚动的距离。

$(window).scroll(function() {
    $('#myElement').css('top', $(this).scrollTop() + "px");
});

正如下面的评论所指出的，不建议将事件附加到滚动事件 - 当用户滚动时，它会触发很多，并且可能会导致性能问题。考虑将其与 Ben Alman 的 debounce/throttle 插件一起使用以减少开销。

Using this HTML:

<div id="myElement" style="position: absolute">This stays at the top</div>

This is the javascript you want to use. It attaches an event to the window's scroll and moves the element down as far as you've scrolled.

$(window).scroll(function() {
    $('#myElement').css('top', $(this).scrollTop() + "px");
});

As pointed out in the comments below, it's not recommended to attach events to the scroll event - as the user scrolls, it fires A LOT, and can cause performance issues. Consider using it with Ben Alman's debounce/throttle plugin to reduce overhead.

回复收藏 0 原文

故人爱我别走 2024-07-14 22:28:18

对于那些支持“position:fixed”的浏览器，您可以简单地使用 javascript (jQuery) 在滚动时将位置更改为“fixed”。这消除了使用此处列出的 $(window).scroll(function()) 解决方案滚动时的跳跃现象。

Ben Nadel 在他的教程中演示了这一点：
创建有时固定位置带有 jQuery 的元素

回复收藏 0 原文

耶耶耶 2024-07-14 22:28:18

美丽的！你的解决方案是99％...而不是“this.scrollY”，我使用“$(window).scrollTop()”。更好的是，这个解决方案只需要 jQuery1.2.6 库（不需要额外的库）。

我特别想要该版本的原因是因为这是目前 MVC 附带的版本。

这是代码：

$(document).ready(function() {
    $("#topBar").css("position", "absolute");
});

$(window).scroll(function() {
    $("#topBar").css("top", $(window).scrollTop() + "px");
});

Beautiful! Your solution was 99%... instead of "this.scrollY", I used "$(window).scrollTop()". What's even better is that this solution only requires the jQuery1.2.6 library (no additional libraries needed).

The reason I wanted that version in particular is because that's what ships with MVC currently.

Here's the code:

$(document).ready(function() {
    $("#topBar").css("position", "absolute");
});

$(window).scroll(function() {
    $("#topBar").css("top", $(window).scrollTop() + "px");
});

回复收藏 0 原文

冬天的雪花 2024-07-14 22:28:18

HTML/CSS 方法

如果您正在寻找一个不需要太多 JavaScript 的选项（以及随之而来的所有问题，例如快速滚动事件调用），则可以获得相同的效果通过添加包装器

和一些样式来实现行为。当我使用以下方法时，我注意到滚动更加平滑（没有元素滞后）：

JS Fiddle

HTML

<div id="wrapper">
  <div id="fixed">
    [Fixed Content]
  </div><!-- /fixed -->
  <div id="scroller">
    [Scrolling Content]
  </div><!-- /scroller -->
</div><!-- /wrapper -->

CSS

#wrapper { position: relative; }
#fixed { position: fixed; top: 0; right: 0; }
#scroller { height: 100px; overflow: auto; }

//Compensate for the scrollbar (otherwise #fixed will be positioned over it).
$(function() {
  //Determine the difference in widths between
  //the wrapper and the scroller. This value is
  //the width of the scroll bar (if any).
  var offset = $('#wrapper').width() - $('#scroller').get(0).clientWidth;

  //Set the right offset
  $('#fixed').css('right', offset + 'px');
});

当然，可以修改此方法以用于在运行时获取/丢失内容的滚动区域（这将导致滚动条的添加/删除）。

HTML/CSS Approach

If you are looking for an option that does not require much JavaScript (and and all the problems that come with it, such as rapid scroll event calls), it is possible to gain the same behavior by adding a wrapper <div> and a couple of styles. I noticed much smoother scrolling (no elements lagging behind) when I used the following approach:

JS Fiddle

HTML

<div id="wrapper">
  <div id="fixed">
    [Fixed Content]
  </div><!-- /fixed -->
  <div id="scroller">
    [Scrolling Content]
  </div><!-- /scroller -->
</div><!-- /wrapper -->

CSS

#wrapper { position: relative; }
#fixed { position: fixed; top: 0; right: 0; }
#scroller { height: 100px; overflow: auto; }

//Compensate for the scrollbar (otherwise #fixed will be positioned over it).
$(function() {
  //Determine the difference in widths between
  //the wrapper and the scroller. This value is
  //the width of the scroll bar (if any).
  var offset = $('#wrapper').width() - $('#scroller').get(0).clientWidth;

  //Set the right offset
  $('#fixed').css('right', offset + 'px');
});

Of course, this approach could be modified for scrolling regions that gain/lose content during runtime (which would result in addition/removal of scrollbars).

回复收藏 0 原文