javascript - 不缩放动态固定元素

Question

我有一个动态导航，可以跟随用户向下浏览页面。在移动设备上，我不希望导航放大，因为您将无法访问右侧的导航。

我尝试的方法破坏了整个导航。还有其他想法吗？

实时导航 http://beeskneesfx.com/

有问题的两个容器是 #top-bar & #top-bar-fixed

Controller JS 注释掉的代码是我试过的

/* FLOAT NAV CONTROLLER */

$(function(){

    var bar = $('#top-bar'),
        showBar = true,
        stalkbutton = $('#stalkbutton'),
        state = false;

    if ( notMobile == false ) {
        showBar = false;
    }


    floatNav();


    $(window).scroll(function () {

        floatNav();

    });

    function floatNav() {

        $('.close-float').click(function () {
            if (state == true) {
                state = false;
                showBar = false;
                bar.slideUp(200, function () {
                    $(this).attr('id', 'top-bar').css('display', 'block');
                });
            }
        });

        if (showBar && state == false && $(window).scrollTop() > 300) {
            bar.attr('id', 'top-bar-fixed').slideDown('slow', function () {
                state = true;
                /*$(this).css({transform: 'scale(' + window.innerWidth/document.documentElement.clientWidth + ')',
                            left: window.pageXOffset + 'px',
                            bottom: document.documentElement.clientHeight - (window.pageYOffset + window.innerHeight) + 'px'});*/
            });
        } else if (state == true && $(window).scrollTop() < 300) {
            state = false;
            bar.slideUp(200, function () {
                $(this).attr('id', 'top-bar').css('display', 'block');
            });
        }
    }

});

CSS

.logo { 
        float: left;
        color: #30546b;
        line-height: 49px;
}

.logo img {
        position: relative;
    float: left;
        margin-right: 10px;
}

.logo .bloom {
        position: absolute;
        top: 0;
        left: 0;
}

.main-width-nav {
        width: 75%;
    min-width: 1005px;
        max-width: 1428px;
        height: 45px;
        margin: 0 auto;
        position: relative;
}

#homebutton {
    position: absolute;
    display: inline-block;
    opacity:0.75;
    top: 50%;
    left: 295px;
    transform: translate(0,-50%);

}

#stalkbutton {
    position: absolute;
    display: none;
    opacity:0.75;
    top: 50%;
    left: 310px;
    transform: translate(0,-50%);
    cursor: pointer;
}

#top-bar .close-float {
    display:none;
}

#top-bar-fixed .main-width-nav .close-float {
    position: absolute;
    top: 0;
    margin-top: 45px;
    left: 50%;
    transform: translate(-50%, 0);
    cursor: pointer;
}

#top-bar, #bottom-bar {
        background: url(http://gfxgaming.cu.cc/images/gamurs/pattern-bg-menu.png) repeat scroll left top rgba(0, 0, 0, 0.6);
        padding: 6px 0 5px;
} 

#top-bar-spacer {
    width: 100%;
    height: 57px;
    border-bottom: 1px solid #131313;
    background: #131313;
    /* Old browsers */
    background: -moz-linear-gradient(top, #131313 0%, #1c1c1c 9%, #111111 28%, #000000 49%, #2b2b2b 81%, #2c2c2c 93%, #4c4c4c 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #131313), color-stop(9%, #1c1c1c), color-stop(28%, #111111), color-stop(49%, #000000), color-stop(81%, #2b2b2b), color-stop(93%, #2c2c2c), color-stop(100%, #4c4c4c));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #131313 0%, #1c1c1c 9%, #111111 28%, #000000 49%, #2b2b2b 81%, #2c2c2c 93%, #4c4c4c 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #131313 0%, #1c1c1c 9%, #111111 28%, #000000 49%, #2b2b2b 81%, #2c2c2c 93%, #4c4c4c 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #131313 0%, #1c1c1c 9%, #111111 28%, #000000 49%, #2b2b2b 81%, #2c2c2c 93%, #4c4c4c 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #131313 0%, #1c1c1c 9%, #111111 28%, #000000 49%, #2b2b2b 81%, #2c2c2c 93%, #4c4c4c 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#131313', endColorstr='#4c4c4c', GradientType=0);
    /* IE6-9 */
}

#top-bar {
        background: #242b35; /* Old browsers */background: -moz-linear-gradient(top,  #242b35 0%, #242b35 50%, #181f29 51%, #181f29 98%,         #75196a 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#242b35), color-stop(50%,#242b35), color-stop(51%,#181f29), color-stop(98%,#181f29), color-stop(100%,#75196a)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #242b35 0%,#242b35 50%,#181f29 51%,#181f29 98%,#75196a 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #242b35 0%,#242b35 50%,#181f29 51%,#181f29 98%,#75196a 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #242b35 0%,#242b35 50%,#181f29 51%,#181f29 98%,#75196a 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #242b35 0%,#242b35 50%,#181f29 51%,#181f29 98%,#75196a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242b35', endColorstr='#75196a',GradientType=0 ); /* IE6-9 */
        border-bottom: 1px solid #4B1B4C;
        position: relative;
        z-index: 999;
        width: 100%;
}

#top-bar-fixed {
        display: none;
        background: #242b35; /* Old browsers */background: -moz-linear-gradient(top,  #242b35 0%, #242b35 50%, #181f29 51%, #181f29 98%,         #75196a 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#242b35), color-stop(50%,#242b35), color-stop(51%,#181f29), color-stop(98%,#181f29), color-stop(100%,#75196a)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #242b35 0%,#242b35 50%,#181f29 51%,#181f29 98%,#75196a 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #242b35 0%,#242b35 50%,#181f29 51%,#181f29 98%,#75196a 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #242b35 0%,#242b35 50%,#181f29 51%,#181f29 98%,#75196a 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #242b35 0%,#242b35 50%,#181f29 51%,#181f29 98%,#75196a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242b35', endColorstr='#75196a',GradientType=0 ); /* IE6-9 */
        border-bottom: 2px solid #001727;
        -webkit-box-shadow: 0 8px 9px 0 rgba(0,0,0,0.3);
        -moz-box-shadow: 0 8px 9px 0 rgba(0,0,0,0.3);
        box-shadow: 0 8px 9px 0 rgba(0,0,0,0.3);
        border-bottom: 1px solid #4B1B4C;
        padding: 7px 0 4px 0;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
}


#top-bar-fix {
        height: 70px;
    background: rgba(85,191,255,0.5);
}

Answer 1

这可以通过更改以下 css 规则来实现:

.main-width-nav {
    width: 75%;
    min-width: 1005px; // this is what is breaking your layout
    max-width: 1428px;
    height: 45px;
    margin: 0 auto;
    position: relative;
}

到:

.main-width-nav {
    width: 100%; // gave it 100% to give it more room to move around
    min-width: 0px;
    max-width: 100%;
    height: 45px;
    margin: 0 auto;
    position: relative;
}