css解决fixed布局不会出现滚动条问题

时间:2019-09-17
本文章向大家介绍css解决fixed布局不会出现滚动条问题,主要包括css解决fixed布局不会出现滚动条问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

需求是页面移动到一定高度时,顶部出现固定的导航栏,并导航栏带滚动条。

CSS很好实现,但是导航栏飘浮顶部后,滚动条怎么也不显示,搜了一些资料终于解决了,现做下笔记。

<div class="top_nav">
    <div class="navTab">  
        <label >聚焦新闻</label><label >融媒报道</label><label >各方发声</label>
        <label >聚焦新闻</label><label >融媒报道</label><label >各方发声</label>
    </div>
  </div>
.navTab{width:100%;height:0.8rem;line-height:0.8rem;font-size:.32rem;background:#ff0;
display: flex;flex-direction: row;white-space: nowrap;overflow-x: scroll;z-index: 99;}
.navTab label{margin-right: 0.3rem;display: inline-block;}
.fixnav {position: fixed;top: 0; bottom: 0;width: 100%;height: auto;
overflow-x: scroll;overflow-y: hidden;z-index: 99;}
<script >
$(function() {
        $(".top_nav").hide();
        $(window).scroll(function() {
            if($(document).scrollTop() >= 200) {
                $(".top_nav").addClass("fixnav").slideDown();
            } else {
                $(".top_nav").hide();
            }
        })
    })

</script>

 

$flag 上一页 下一页