Question

我的搜索框和社交图标＆＃34;隐藏在我的主菜单后面。这可能是因为我的.hide菜单类。我有一个jQuery插件，可以在向上滚动时显示主菜单，并在向下滚动时使其消失。我想要实现的是＆＃34;搜索框和社交图标＆＃34; DIV始终显示在主菜单下方。这可能吗？

我的FIDDLE ...... FIDDLE LINK HERE

＆＃13;

.navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:focus,.navbar-default .navbar-nav > .active > a:hover {
    color: #fff;
}

.menu-container {
    background-color: #fff;
    border-bottom: 1px solid #000;
	border-top: 1px solid #000;
    min-height: 20px;
    position: relative;
}

.navbar-nav a:hover {
    color: #000;
}

.navbar-nav a:link {
    font-size: 12px;
    font-family: 'century schoolbook';
    color: #000;
    /*text-decoration: overline;
    text-decoration-color: #A10000*/
}

.brand-name a {
    text-decoration: none;
}

.brand-name img {
    max-width: 137px;
    padding: 8px;
/*position:absolute;*/
    left: 0;
}

ul {
    list-style-type: none;
}

.navbar-form input,.form-inline input {
    width: auto;
}

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

#sidebar.affix-top {
    position: static;
}

#sidebar.affix {
    position: fixed;
    top: 80px;
}

.navbar-default .navbar-nav > li > a {
    color: #A10000;
    font-family: 'LuzSans-Book';
    font-size: 15px;
	font-weight:bold
}

.navbar-default .navbar-nav > li > a:hover {
    background-color: #A10000;
    color: #000;
	margin-top:4px;
	margin-bottom:4px;
}

.navbar-default .navbar-nav > .active > a {
    background-color: #000;
	margin-top:4px;
	margin-bottom:4px;
}

.navbar-custom-social {
    height: 15px;
    float: right;
    clear: none;
    margin-right: 25px;
}

.navbar-fixed-top {
    padding-top: 0;
}


#search-social {
	margin-bottom:20px
}

header.site_header {
    box-shadow: 0 1px 6px rgba(0,0,0,.35);
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 999;
    -webkit-transition: top .5s;
    transition: top .5s;
    background-color: #fff;
}

header.site_header.hide-menu {
    top: -90px;
}

＆＃13;

<header class="site_header root" id="nav">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="navbar navbar-default navbar-static">
                        <!-- <div class="clearfix container navbar-fixed-top"> -->
                        <div class="clearfix menu-container">
                            <div class="pull-right clearfix toggle_btn_wrap">
                                <a class="navbar-toggle" data-target=
                                ".navbar-collapse" data-toggle="collapse" href=
                                "#"><i class="fa fa-bars"></i></a>
                            </div>
                            <div class="pull-left brand-name">
                                <a href="#"><img alt="NAME" src=
                                "/images/LOGO.png"></a>
                            </div>
                            <div class="clearfix prevent-float"></div>
                            <div class="navbar-collapse collapse">
                                MENU ITEMS
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
<div id="search-social" class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="navbar navbar-default navbar-static">
                    <div class="clearfix search_and_social">
                        <div class="clearfix navbar navbar-custom-search">
                            SEARCH BOX
                        </div>
                        <div class="clearfix navbar navbar-custom-social">
                            SOCIAL ICONS
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

＆＃13;

Answer 1

最简单的可能是在.site_header和#search-social之间使用兄弟选择器。确保#search-social已定位。类似的东西：

#search-social {
  margin-bottom: 20px;
  position: relative;
}

header.site_header ~ #search-social {
  top: 40px;
}
header.site_header.hide-menu ~ #search-social {
  top: 0px;
}

示例（带有测试按钮）：https://jsfiddle.net/7f6q75h8/2/

注意：顶部样式需要根据菜单高度进行一些调整。

Answer 2

也许你可以使用position：absolute;

否则，当您想要显示或隐藏某些内容时，可以在包装器上添加一个类。

.wrapper .active .div2{
   display:block;
}

Answer 3

我不知道这是否是您想要的，但可能会引导您朝着正确的方向前进。刚添加了一个jquery函数来确定菜单栏可见时的状态，

function adjustMenu() {
   if (!$('#nav').hasClass('hide-menu')) {
      $('#search-social').css('margin-top', $('#nav').height() + 'px');
   } else {
      $('#search-social').css('margin-top', '0px');
   }
}

在页面加载以及页面

的onscroll事件内部调用此函数

$(window).scroll(function() {
   adjustMenu();
});

这是更新后的fiddle

如果您可以使用正在使用的插件代码进行编辑，有更好的方法。

两个DIV在同一个地方

3 个答案: