滚动时始终可见 div答案

【问题标题】：Always visible div while scrolling滚动时始终可见 div
【发布时间】：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",'' )             
        }
        });

【讨论】：