用户滚动时在屏幕上粘贴div

Question

当用户滚动时，我想让我的div right地粘在屏幕上。 这是一个示例情况： https ： //jsfiddle.net/gwjehuzf/

我尝试了很多，但没有成功。 像这样的东西：

$(window).scroll(function () {

    if ($(document).scrollTop() > 400) {
        console.log("a");
        var newPos = $(document).scrollTop() + 400;
        $('.right').css({ top: newPos });
    }

    else {
        $('.right').css({ top: 400 });
    }
})

由于某种原因不起作用。 有任何想法吗？

Answer 1

只需使用css .right {position：sticky; 顶部：0; 溢出：隐藏;}

Answer 2

只需添加几个CSS ，我们就可以解决您的问题。 谢谢

.right {
  position: fixed;
  right: 0;
  width: calc(100% - 200px);
}

Answer 3

在您的代码中添加此css

 .right { position: sticky; top: 5px; } 

Answer 4

不需要JavaScript。 使用position: fixed为.right div。
如果它消失了，给它一个宽度（可能大约80％）和right: 0 ：

.right {
    position: fixed;
    width: 80%;
    right: 0;
}

Answer 5

您可以通过添加position: sticky to .right并设置top: 0来实现此.right 。

.right {
  position: fixed;
  top: 0;
}

你的JSFiddle 在这里纠正了 。