滚动时始终可见 div

Posted 2023-03-05

【中文标题】滚动时始终可见 div

【英文标题】：Always visible div while scrolling

【发布时间】：2012-02-17 17:45:55

【问题描述】：

在我的 aspx 页面上，我有两个左右部分。我想在滚动右侧（这是页面的实际内容）时始终显示左侧（实际上是一个“div”包含树视图）。谢谢

【问题讨论】：

请选择您喜欢的答案@M Usman Shafique

【参考方案1】：

您好，我找到了最佳解决方案！一如既往的 JQUERY 救了我的命！！

只要放一个你喜欢的 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>

我从一个网站上获取了该代码，它可以工作并且很容易理解。

【参考方案2】：

您需要将position: fixed; 放在 div 元素上。这会将其锚定到视口。

【讨论】：

谢谢，但我使用的是 ie7，其中 position:fixed 不起作用

忘掉 ie7 和旧版本吧，老兄 ;)

当div的高度大于视口时你会怎么做。

【参考方案3】：

快进到 2020 年，现在可以使用 CSS 实现这一目标。

<div style="position: sticky; top: 0;"> Tree view </div>

The user npas explains this quite nicely:

top 是滚动时 div 应停留在视口顶部的距离。必须指定 top。 (…)

粘性 div 在所有方面都会像普通 div 一样，除非当您滚动过去时，它会粘在浏览器的顶部。

这里有一个jsfiddle 给你一个想法。

MDN documentation

all modern browsers支持

【参考方案4】：

您需要在 CSS 中将 div 的位置设置为 Fixed。请参阅this link 了解更多信息。您还需要在 css 中使用 top 和 left 设置位置，以便它知道在哪里修复它！

【参考方案5】：

问题是，当积木移动时，它会引起注意力和专注于阅读的能力。

使用这个函数来解决这个问题。

这段代码很完美：

（必要时更改“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",'' )             
        
        );