5

有人可以告诉我当我在网页上向下时如何调用此效果并且有一个框，起初在页面中间，但在向下的过程中卡在内容的一侧并跟随你页面底部。我在 facebook 和许多网站上看到了这个。我不知道“Div”，因为这些仍然是固定的

抱歉，我忘记写了当只有页面顶部接触到它们时它们会移动

4

5 回答 5

1

使用 Javascript，您可以在窗口上放置一个侦听器以获取滚动事件，并使用 pageYOffset 或类似方法计算与 div 末尾的距离，然后在滚动条到达该位置时应用 css 使该 div 固定。

编辑

只是为了好玩，用 jQuery；

var position = window.pageYOffset;

$(window).on('scroll', function () {
    position = window.pageYOffset;
    if(position > 150) {
        $('#div').css({ 'top': position + 'px' });
    } 
});

在 CSS 中；

#div {
    position:absolute;
    top: 150px;
    -webkit-transition: top 1s ease-in-out;
}

这应该工作

于 2013-04-18T21:37:17.070 回答
1

据我了解，您希望在向下滚动时跟随您，但起初它位于网页的中间。您可以使用一些 jquery 来实现：

例子

教程

于 2013-04-18T21:39:16.647 回答
1

这是我发现的一个教程，它告诉您如何做到这一点。

这是一个类似的问题： 如何让浮动页脚粘在 IE 6 的视口底部？

以及使用 jquery 解释它的教程。 http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/

于 2013-04-18T21:43:57.793 回答
0

重现这一点的最简单方法是使用 div position: fixed;- 它会一直保持在页面上下的原始位置。

所以，如果你div的菜单上有一个：

<div id="menu">
  <ul>
    <li><a href="link1.htm">Link 1</a></li>
    <li><a href="link2.htm">Link 2</a></li>
    <li><a href="link3.htm">Link 3</a></li>
  </ul>
</div>

你可以自定义它

#menu {
  position: fixed;
  left: 250px;
  top: 10px;
}
于 2013-04-18T21:31:46.697 回答
0

您只需要使用一些基本的 css：

#fixed {
    position:fixed;
    right:0px;
    top:150px;
}
于 2013-04-18T21:32:16.177 回答