Question

有人可以告诉我当我在网页上看到这个效果是如何被调用的，并且有一个盒子最初位于页面的中间但是在向下的方向上卡在内容的一侧并且跟着你到页面底部。我在Facebook和许多网站上看到这个。我不知道＆＃39; Div＆＃39;因为这些仍然是固定的

抱歉，当只有页面顶部触及它们时，我忘了写下移动

Answer 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;
}

这应该有效

Answer 2

根据我的理解，您希望在向下滚动时跟随您，但最初它位于网页的中间。你可以使用一些jquery来创建它：

Example

tutorial

Answer 3

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

这是一个类似的问题： How do I get a floating footer to stick to the bottom of the viewport in IE 6?

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

Answer 4

复制的最简单方法是使用带有position: fixed;的div - 它会一直向上或向下粘贴到原始位置。

因此，如果您的菜单中有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;
}

Answer 5

你只需要使用一些基本的CSS：

#fixed {
    position:fixed;
    right:0px;
    top:150px;
}

如何用塞子制作粘性div

5 个答案: