用户滚动时在屏幕上显示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。
如果消失，则给它一个宽度（大约80％）并加上right: 0：

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

Answer 5

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

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

您的JSFiddle更正了here。