[英]Stick div on screen when user is scrolling
I want to make my div right
to stick on screen when user is scrolling. 当用户滚动时,我想让我的div
right
地粘在屏幕上。 This is example situation: https://jsfiddle.net/gwjehuzf/ 这是一个示例情况: https : //jsfiddle.net/gwjehuzf/
I tried a lot, but without success. 我尝试了很多,但没有成功。 Something like this:
像这样的东西:
$(window).scroll(function () {
if ($(document).scrollTop() > 400) {
console.log("a");
var newPos = $(document).scrollTop() + 400;
$('.right').css({ top: newPos });
}
else {
$('.right').css({ top: 400 });
}
})
for some reason is not working. 由于某种原因不起作用。 Any ideas?
有任何想法吗?
just use css .right{position:sticky; 只需使用css .right {position:sticky; top:0;
顶部:0; overflow:hidden;}
溢出:隐藏;}
Just need to add few CSS , we'll resolve your issue. 只需添加几个CSS ,我们就可以解决您的问题。 Thanks
谢谢
.right {
position: fixed;
right: 0;
width: calc(100% - 200px);
}
Add this css in your code 在您的代码中添加此css
.right { position: sticky; top: 5px; }
No JavaScript needed for that. 不需要JavaScript。 Use
position: fixed
for the .right
div. 使用
position: fixed
为.right
div。
If it disappears, give it a width (maybe about 80%) and right: 0
: 如果它消失了,给它一个宽度(可能大约80%)和
right: 0
:
.right {
position: fixed;
width: 80%;
right: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.