Html 滚动时始终可见 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8987519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Always visible div while scrolling
提问by M Usman Shafique
On my aspx page, I have two left and right portions. I want to show always left side (which is actually a 'div' containig treeview) while scrolling the right side (which are actual contents of page). Thanks
在我的 aspx 页面上，我有两个左右部分。我想在滚动右侧（这是页面的实际内容）时始终显示左侧（实际上是一个“div”包含树视图）。谢谢
回答by Despertaweb
Hi I found the best solution! As always JQUERY saving my life !!
嗨，我找到了最好的解决方案！一如既往，JQUERY 救了我的命！！
Just put a Div called as you wan, I've chosen the same in the example below: #scrollingDiv.
只需放置一个名为 as you wan 的 Div，我在下面的示例中选择了相同的：#scrollingDiv。
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
$().ready(function() {
var $scrollingDiv = $("#scrollingDiv");
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop() )}, "slow" );
});
});
</script>
I took that code from a website, it works and it's pretty easy to understand.
我从网站上获取了该代码，它有效并且很容易理解。
回答by danbee
You need to put position: fixed;on the div element. That will anchor it to the viewport.
您需要穿上position: fixed;div 元素。这会将其锚定到视口。
回答by Daniel Casserly
回答by user3609824
The problem is that when the block moves, it gets attention and ability to concentrate on reading.
问题是当积木移动时，它会得到注意力和专注于阅读的能力。
To remedy this using this function.
使用此功能来解决此问题。
This code is perfect :
这段代码很完美：
(change "220" and "46px" if necessary)
（如有必要，更改“220”和“46px”）
var $scrollingDiv = $("#scrollingDiv");
$(window).scroll(function(){
if ($(window).scrollTop()>220) {
$scrollingDiv
.css("position",'fixed' )
.css("top",'46px' )
} else {
$scrollingDiv
.css("position",'' )
.css("top",'' )
}
});
回答by Grilse
Fast forward to 2020, and it is now possible to do this with CSS.
快进到 2020 年，现在可以使用 CSS 来做到这一点。
<div style="position: sticky; top: 0;"> Tree view </div>
The user npas explains this quite nicely:
topis the distance to the viewport top the div should stay at when you scroll. Specifyingtopis mandatory. (…)The sticky div will act like a normal div in all ways except when you scroll past it, then it will stick to the top of the browser.
Here's a jsfiddleto give you an idea.
top是滚动时 div 应停留的视口顶部的距离。指定top是强制性的。(…)粘性 div 在所有方面都像普通 div 一样，除非你滚动它，然后它会粘在浏览器的顶部。
这是一个jsfiddle给你一个想法。
Supported by all modern browsers
所有现代浏览器都支持
