Question

我希望获得一个动态获取滚动位置高度实例的方法，只要我滚动页面，也可以更新CSS。

我使用了这个代码段，但bodyHeight的值在第一页加载时修复，而不是在滚动和CSS时更新。

var bodyHeight = $('body').scrollTop();
var fixedTop = bodyHeight - 50;//(50)topnav height
$('.fixed-inner').css('top', fixedTop + 'px');

Answer 1

尝试使用类似的内容：

<!DOCTYPE html>
<html>
<head>
    <style>
        div#main{
            background-color:green;
        }
    </style>
</head>
<body>
<br /><br /><br /><br />
<div id="main" style="height:300px; position:relative; overflow:scroll;">
    <div class="stairsImage" style="height:500px; width:300px; background-color:yellow; ">
       <h1 id="testName">Lorem Ipsum</h1>
    </div>
</div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script> 

<script>
$(document).ready(function() {
//-------------------------
   $(window).scroll(function(){
      var wScroll = $(this).scrollTop();
        console.log(wScroll);

      $("#testName").css({'transform' : 'translate(0px, '+ wScroll +'px)'});

   });  
//-------------------------
   $("div#main").scroll(function(){
      var wScroll = $(this).scrollTop();
        console.log(wScroll);

      $("#testName").css({'transform' : 'translate(0px, '+ wScroll +'px)'});

   }) 
});
</script>       
</body>
</html>

Answer 2

试试这个

var bodyHeight = $(window).scrollTop();
var fixedTop = bodyHeight - 50;//(50)topnav height
$('.fixed-inner').css('top', fixedTop + 'px');

Answer 3

我希望这有助于你

$(window).scroll(function () { 
    //You've scrolled this much:
       $('div').text("The scrool position is " + $ (window).scrollTop() + " pxs");
});

jsFiddle here

祝你好运：）

Answer 4

滚动页面时需要重新计算bodyHeight，并且有一个jquery事件，你可以将bodyHeight作为全局变量。

var bodyHeight = $('body').scrollTop();
$(window).scroll(function () { 
    //recalculate the value every time the user scroll
    var bodyHeight = $(window).scrollTop();
    //doSomething()
});

进一步阅读：

JS获取滚动实例高度

4 个答案: