javascript - 在 css 中为移动 View 调整/禁用 jQuery 代码

Question

我的网站中有粘 header 。当我尝试为移动设备优化我的标题时，一切正常，但是当它变得粘性时，它会调整他的大小或类似的东西，所以我的导航不可见。我想知道有什么方法可以更改 css 中的 jQuery 代码，这样我的标题在变得粘性时不会调整大小。

这是我的代码示例: http://codepen.io/anon/pen/JKXYpa

注意:如果您想查看问题出在哪里，只需将浏览器的宽度调整为 < 480px。

Answer 1

以下 CSS 应该适合您。你正在做一些导致问题的事情。最重要的是，您的#wrapper 声明自相矛盾。您声明了一个大于最大宽度的最小宽度。最小宽度必须小于最大宽度。

我还做了一些其他的小调整，包括针对小屏幕尺寸减小媒体查询中的标题字体大小，以使导航适合。否则，它将包裹在蓝色容器下方。

    *{
        padding:0;
        margin:0;
    }

    /* Header */
    #header {
        transform: translateZ(10px);
        background-repeat: no-repeat;
        background-color:#3cb5f9;
        width: 100%;
        height: 80px;
        top:200;
        left: 0;
        z-index: 999;
        box-sizing:border-box;
        border-bottom:1px solid white;
    }
    #header nav {
        display: inline-block;
        float:right;
        line-height:80px;
    }
    #header nav a {
        margin-left: 25px;
        color: #fafafa;
        font-weight: 700;
        font-size: 18px;
        text-decoration:none;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }
    #header nav a:hover {
        color: black; 
    }
    #header img {
        line-height:80px;
        margin-top:14px;
        display:block;
        float:left;
        height:51px;
    }

    .clearfix{
        display: block;
        width:70%;
        clear:both;
        margin: 0 auto;
    }

    /*Mobile part*/
    @media screen and (max-width: 480px) {

        #header {
            width: 100vw;
            float:none;
        }

        p{ 
            font-size: 0.5em;
        }

        ::-webkit-scrollbar{
            display:none;
        } 

        #header nav{
            float:right;
        }
        #header nav {
            display: inline-block;
            float:center;
            line-height:80px;
        }
        #header nav a {
            font-size: 12px;
            margin-left: 10px;
        }
        #header nav a:hover {
            color: black; 
        }
        #header .clearfix {
            width: 95%;
        }
    }

    /* Other */

    #main{
        width: 100%;
        color:#3cb5f9;
        margin: 0 auto; 
    }

    .container{
        width:70%;
        margin: 0 auto;
    }

    #wrapper {
        max-width:1240px;
        height:2000px;
        color:#3cb5f9;
        margin: 0 auto; 
    }

    .home{
        width:100vw;
        height:600px;
        clear:both; 
    }