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:;}

.navTab label{margin-right: 0.3rem;display: inline-block;}

.fixnav {position: fixed;top:; bottom:;width: 100%;height: auto;

overflow-x: scroll;overflow-y: hidden;z-index:;}

<script >

$(function() {

        $(".top_nav").hide();

        $(window).scroll(function() {

            if($(document).scrollTop() >= 200) {

                $(".top_nav").addClass("fixnav").slideDown();

            } else {

                $(".top_nav").hide();

            }

        })

    })

</script>

巴特西

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

最新文章

热门文章