Question

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

Answer 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>

我从网站上获取了该代码，它很有效，而且很容易理解。

Answer 2

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

Answer 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

支持

Answer 4

您需要在CSS中将div的位置设置为Fixed。有关详细信息，请参阅this link。您需要使用css中的顶部和左侧设置位置，以便知道在哪里修复它！

Answer 5

问题是当块移动时，它会引起注意并集中精力阅读。

使用此功能解决此问题。

此代码非常完美：

（更改＆＃34; 220＆＃34;＆＃34; 46px＆＃34;如有必要）

  var $scrollingDiv = $("#scrollingDiv");

$(window).scroll(function(){     
if ($(window).scrollTop()>220)       {
            $scrollingDiv
                .css("position",'fixed' )  
                .css("top",'46px' )           
        } else {
 $scrollingDiv
                .css("position",'' )    
                .css("top",'' )             
        }
        });

滚动时始终可见div

5 个答案: