Question

我的页面右侧有一个差距可能是10px。我可以使用oveflow-x修复它：隐藏为html和body但是如果我这样做，它会禁用导航栏效果

<script>
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 120) {
        $("#mainNav").addClass("scrolling");
    } else {
        $("#mainNav").removeClass("scrolling");
    }
});
</script>

向下滚动时会更改导航栏背景颜色。

我也试过了width:100%，但它既没有效果。

有人可以帮助我消除差距而不影响这个功能吗？谢谢

Answer 1

知道了。请参阅http://jsfiddle.net/uffo6you/3/ .scrolling的CSS特异性排名不足以覆盖#mainNav。宽度和溢出应该对此没有任何影响。请证实？

<style>
#mainNav{
    height: 20vh;
    width: 80%;
    background-color: blue;
    color: white;
    position: fixed;
}
#mainContent{
    height: 200vh;
    padding-top: 20vh;
}

.scrolling{
    background-color: red !important;
}
</style>

<div id="mainNav">Top Navbar</div>
<div id="mainContent"> 
        Content goes here
</div> 

<script>
$(window).scroll(function() { 
    var scroll = $(window).scrollTop();
    console.log(scroll);
    if (scroll >= 80) { 
        $("#mainNav").addClass("scrolling"); 
    } else {
        $("#mainNav").removeClass("scrolling");
    } 
});
</script>

页面右侧的差距（overflow-x：hidden issue）

1 个答案: