固定标题和滑动切换的问题答案

【问题标题】：Issue with fixed header and slidetoggle固定标题和滑动切换的问题
【发布时间】：2013-07-24 14:51:54
【问题描述】：

我有一个静态 Bootstrap 菜单，上面有一个 jQuery slideToggle 区域，使用菜单旁边的链接激活。

我遇到的问题是，当切换打开时，菜单在屏幕上保持静止，但切换区域随着内容移动。

我的 HTML 是

<div class="dropdownwrap"></div>
<header id="mpthis" class="banner navbar navbar-fixed-top" role="banner">
    <div class="navbar-inner">
        <div class="container">
            <div id="toplogo"> <a id="dropdown" href="#" title="Click This Button">X</a>
            </div>
            <nav class="nav-main nav-collapse collapse" role="navigation">
                <ul id="menu-primary-navigation" class="nav">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                    <li><a href="#">Link 6</a></li>
                    <li><a href="#">Link 7</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>
<div id="content">
    <p>Croissant chocolate muffin. Powder fruitcake fruitcake cupcake fruitcake sesame snaps. Fruitcake macaroon sesame snaps candy cake bear claw tart tiramisu. Sugar plum wafer pie ice cream marshmallow bear claw powder. Sesame snaps cotton candy jelly beans ice cream. Muffin gummies jelly beans croissant tootsie roll cake marshmallow dragée. Jelly-o cookie toffee oat cake. Chupa chups dessert fruitcake gummies fruitcake muffin gummi bears ice cream. Bonbon pudding cake soufflé macaroon sweet roll. Oat cake jelly-o pastry. Sweet roll cotton candy chupa chups cheesecake. Unerdwear.com chocolate candy canes gummi bears tootsie roll apple pie toffee pastry.</p><div>

我的 CSS 是

.dropdownwrap {background-color:#ef0403;display:none;height: 150px;width: 100%;z-index: 1000;top: 0;position: relative;}.navbar {width: 100%;height: 44px;background: #eee;display: block;}#toplogo {float: left;}.navbar .nav>li {float: left;list-style: none;padding: 0px 14px;}.navbar-fixed-top {position: fixed;right: 0;left: 0;z-index: 1030;margin-bottom: 0;}.navbar-fixed-mp {right: 0;left: 0;z-index: 1030;position: fixed;}#content {padding-top: 34px}

我的 jQuery 是

jQuery(document).ready(function () {
jQuery(".dropdownwrap").hide();
jQuery('#dropdown').click(function () {

    if (!jQuery(".dropdownwrap").is(":visible")) jQuery('#mpthis').removeClass("navbar-fixed-top").addClass("navbar-fixed-mp");
    jQuery('.wrap').addClass("fixthis");


    jQuery(".dropdownwrap").slideToggle(function () {
        if (!jQuery(".dropdownwrap").is(":visible")) jQuery('#mpthis').addClass("navbar-fixed-top").removeClass("navbar-fixed-mp");
        jQuery('.wrap').removeClass("fixthis");



    });
});

});

我在下面创建了一个小提琴，这展示了正在发生的事情

http://jsfiddle.net/blayney/XDUuX/24/

如果有人能提供帮助，将不胜感激

谢谢

马特

【问题讨论】：

标签： jquery twitter-bootstrap css-position navigationbar

【解决方案1】：

我不确定您是否得到了答案，但问题是您正在删除具有position: fixed 属性的navbar-fixed-top，并将其替换为navbar-fixed-mp，这也已修复。 fixed 位置意味着元素相对于浏览器而不是页面定位 - 因此它不滚动。如果你只是删除navbar-fixed-top而不用navbar-fixed-mp替换它，你应该会得到想要的效果。

http://jsfiddle.net/XDUuX/28/

【讨论】：