Question

我试图将位置设置为固定在scoll上。我需要它发生而没有下面的div有一个位置。

我创造了这个我想要它的小提琴，但没有div #body定位。

http://jsfiddle.net/mortenhauberg/fPTnq/embedded/result/

它可以吗？

我是javascript / jQuery的新手！

我希望你能理解我可怜的英语！

Morten Hauberg

Answer 1

根据您的代码，当菜单位于可滚动区域内时，类not_fixed正在应用position:absolute。但是当用户在可查看区域外滚动浏览器视口时，您可以将脚本添加到<div id="menu">的css类。添加fixed类（应用position:fixed）。删除not_fixed类，它将停止中断滚动。

<div id="menu" class="not_fixed">
   <h1 id="show">MENU</h1>           
   <div class="hide" id="sub_menu" style="display: none;">
      TEKST<br>
      TEKST<br>
      TEKST<br>
      TEKST<br>
      TEKST<br>
      TEKST<br>
      TEKST<br>
   </div>     
</div>

Answer 2

正如其他人所说的那样，你的小提琴似乎正在做你想要的。在上面的评论中，听起来你可能在修复目标元素下面的内容时遇到问题。一个常见的问题是，当它固定时，下面的内容会跳到目标之下。

这是一个小提琴，演示了在某些滚动后固定的标题，并且它下面的内容不会跳到页面上。此外，此演示显示您可以将页眉设置为在页面下方“解除固定”，以便它不会超过页脚。

以下是演示中的用法：

// the limit is optional, but it will make the header move up the
// page again once it reaches the 7th paragraph
$(document).ready(function() {
    $('.header').scrollToFixed( { limit: $($('h2')[7]).offset().top } );
});

这是一个演示这一点的小提琴：http://jsfiddle.net/ZczEt/2/

以下是jquery插件及其来源：https://github.com/bigspotteddog/ScrollToFixed

如何在没有“跳跃”的情况下将位置改为固定

2 个答案: