用jQuery监听页面滚动时页面宽度变小

想要实现类似淘宝搜索框的下滑固定
于是对窗体的下滑距离进行监控
简化代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function () {
            var bool1=true;
            $(window).scroll(function () {
                var roll = document.documentElement.scrollTop;
                if (roll > 400 && bool1) {
                    alert("下滑距离超过400px");
                    bool1 = false;
                }
                if (roll < 400 && !bool1) {
                    alert("已经回到400px以上");
                    bool1 = 1;
                }
            })
        })
    </script>
</head>
<body>
    <div style="height:400px;width:1920px;background-color:#808080;margin:10px auto"></div>
    <div style="height:400px;width:1920px;background-color:#808080;margin:10px auto"></div>
    <div style="height:400px;width:1920px;background-color:#808080;margin:10px auto"></div>
    <div style="height:400px;width:1920px;background-color:#808080;margin:10px auto"></div>
    <div style="height:400px;width:1920px;background-color:#808080;margin:10px auto"></div>
    <div style="height:400px;width:1920px;background-color:#808080;margin:10px auto"></div>
    <div style="height:400px;width:1920px;background-color:#808080;margin:10px auto"></div>
    <div style="height:400px;width:1920px;background-color:#808080;margin:10px auto"></div>
    <div style="height:400px;width:1920px;background-color:#808080;margin:10px auto"></div>

</body>
</html>

运行如下

img

此时下方出现滚动条，浏览器的缩放比例宽为1920无变化
F12查看body的宽变为1903px

img

尝试过：
1.在meta 更改视口宽度，无用
2.更改body标签的宽度（body标签的宽度修改成功，但浏览器呈现效果不变），无用
3.切换浏览器，无用

因此我的页面布局乱了，下面那个滚动条着实碍眼，希望能得到解决
请进行批评与指正，万分感谢

把div的宽度去掉，div块级元素，自动占满一行，设置宽度后由于出现垂直滚动条会导致可视宽度变小，所以body变为1903，而div是1920超出body宽度就会出现水平滚动条了

img


<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>固定导航栏</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .top{
            height: 300px;
            width: 100%;
            background-color: #aff;
        }
        .nav {
            height: 160px;
            width: 100%;
            background-color: #faf;
            text-align: center;
            font-size: 30px;
        }
        .main {
            height: 3000px;
            width: 100%;
            background-color: #ffa;
        }
    </style>

</head>

<body>
    <div class="top">
    </div>
    <div class="nav">
        导航栏
    </div>
    <div class="main">
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(window).on('scroll',function(){

           if( $(window).scrollTop() > $('.top').height() ){
               $('.nav').css({
                   position:'fixed',
                   top:0
               })
           }else{
                $('.nav').css('position','static')
           }
       })
    </script>
</body>

</html>

根据window滚动距离，来调整导航栏的定位方式，静态定位和固定定位的切换就行了
不过导航栏固定定位脱标会影响布局，一般还得下面盒子加一个margin-top防止顿闪

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632