Question

我有一个静态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/

如果有人可以提供帮助，我们将不胜感激

由于

马特

Answer 1

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

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

固定标题和slidetoggle的问题

1 个答案: