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

我想让我的div

向右

在用户滚动时粘在屏幕上。这是一个例子：

我试了很多，但没有成功。大概是这样的：

$(window).scroll(function () {

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

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

---

由于某种原因，它不起作用。有什么想法吗？

不需要JavaScript。对

右侧的
分区使用
位置：fixed
。

如果它消失了，给它一个宽度（大约80%），然后
右：0
：

。对{
位置：固定；
宽度：80%；
右：0；
}
您可以通过将
位置：sticky
添加到
。right
并设置
top:0
来实现这一点

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

您的JSFIDLE已更正。
在代码中添加此css


。对{
位置：粘性；
顶部：5px；
}
只需添加一些CSS，我们就能解决您的问题。谢谢

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

只需使用css。右{position:sticky；top:0；overflow:hidden；}
给出css
position:fixed
，它将work@JoykalInfotech不是。添加
修复后图形消失
。是否尝试使用position:sticky？position:sticky；排名：0@教父粘性和顶部崩溃悬停效果：当用户scroll@NullDev我想避免应用
width
Sticky，因为所有主要浏览器都不支持它，请参阅它的caniuse表：。我建议改为使用
position:fixed
。为什么在该解决方案中不应用悬停效果？这似乎是可行的，但我有另一个问题-为什么悬停效果在图像上不可见？如果没有
位置
和
右侧
悬停功能正常：该解决方案似乎会使悬停效果崩溃：为什么不应用悬停效果？我认为它的重叠试图添加溢出：隐藏；您可以添加演示以获得更多解释您可以在JSFIDLE上测试代码您将看到他有年龄以下的图标这就是他所说的悬停效果不适用Hello@dafie我的答案对您有帮助吗？