问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何动态监听滚动条的高度？

头像
凌乱_小青年
    30355182

    想做这种滚动悬浮，效果实现了，就是需要刷新才起作用，新手求赐教！

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .top{
            height:100px;
            background: #f00;
        }
        .mean{
            width:1200px;
            margin:0 auto;
        }
        .left{
            width:200px;
            float: left;
            background: #ccc;
            height:300px;
        }
        .right{
            width:980px;
            float: right;
            background: #ff0;
            height:2000px;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var Height = $(".top").height();
            var top = document.body.scrollTop;
            //console.log(Height);
            //console.log(top);
             if(top > Height){
                 $(".left").css({"position":"fixed","top":"0"});
             }else{
                 $(".left").css({"position":"relative","top":"0"});
             }
        });
    </script>
</head>
<body>
    <div class="top"></div>
    <div class="mean">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>
    javascript
    阅读 9.2k
    2 个回答
    得票最新
    头像
    getcww
      2561413
      ✓ 已被采纳
      $(window).scroll(function(){
     //执行处理的代码
})
      头像
      xzavier
        7.1k417

        如上所说：

        $(document).ready(function(){
          var fixNav = function() {
            var Height = $(".top").height();
            var top = document.body.scrollTop;
            //console.log(Height);
            //console.log(top);
            if(top > Height){
               $(".left").css({"position":"fixed","top":"0"});
            }else{
               $(".left").css({"position":"relative","top":"0"});
            }
          }
            $(window).scroll(function(){
                fixNav();
            })
        });
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题