内容向下滚动时显示导航栏

时间:2018-09-13 07:30:48

标签: css html5 bootstrap-4

我在应用程序中使用了两个导航栏。导航栏位于菜单的主布局中,另一导航栏负责搜索文本框和按钮。

我试图使第二个导航栏保持粘性,以便当我向下滚动内容时,该导航栏应保持在屏幕顶部。

我尝试了navbar-fixed-top属性。但这是行不通的。 以下是使用的导航栏html:

<div id="dvHomeSearch">
        
            <nav class="navbar-header navbar-default homeTheme">
                <div class="container-fluid">
                    <div class="row" id="dvHomeSearchRow">
                        <div class="col-sm-1" style="padding-top:20px;">
                            <div style="text-align:center">
                                <a href='@Url.Action("Search","Home")' style="color:white">My Search</a>
                            </div>
                        </div>
                        <div class="col-sm-6" style="padding-top:14px">
                            <div class="form-group input-group" id="formUser">
                                <input type="text" id="txtHomeSearch" class="form-control input-md typeahead" placeholder="Search..." autocomplete="off" spellcheck="false" />
                                <span id="spnBtnSearch" class="input-group-addon" style="cursor:pointer" title="Search"><i class="glyphicon glyphicon-search"></i></span>
                            </div>
                            <div style="width:100%; text-align:center; vertical-align:top">
                                <span id="PopupMessage" style="display:none; background-color:#00ffff; color:black; font-size:10px">Search Intelligence is not available after complete type press tab</span>
                            </div>

                            <input type="hidden" id="hdnHomeSearch" />

                        </div>
                        <div class="col-sm-5">
                        </div>
                    </div>
                </div>
                <div style="height:100%">

                </div>
            </nav>     
    </div>
<div id="dvSearchGrid" class="container" style="width:100%">
Html Content....
</div>

请提出建议。

1 个答案:

答案 0 :(得分:0)

navbar-fixed-top属性仅构建为“ nav”元素,可以在CSS文件中尝试(位置:固定)