引導4顯示搜索框到位時粘導航鎖

我怎麼會顯示就地一旦粘導航鎖搜索輸入，並刪除它時，它不到位鎖定？我希望它顯示在教堂中殿的右側。

我認爲這需要用Jquery完成，但我不是一個前端人，所以這種方式超出了我的設計能力。請訪問www.pricereference.com查看該網站。

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta name="description" content="{% block description %}{% endblock %}"> 
    <meta name="keywords" content="{% block keywords %}{% endblock %}"/> 
    <meta name="google-site-verification" content="qgjJmLV5Fd901rWTMqI3oL119zWfarqGqkfPjvnwATk"/> 
    <meta name="msvalidate.01" content="1960AF70A1C1582C7B84ECFF511B758A"/> 
    <link href="https://fonts.googleapis.com/css?family=Kavoon" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Asul" rel="stylesheet"> 
    <script src="https://use.fontawesome.com/9bb4a99f3b.js"></script> 
    <link rel="icon" href="../../favicon.ico"> 

    <title>{% block title %}{% endblock %}</title> 

    <!-- Bootstrap core CSS --> 
    <link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet"> 

    <!-- Custom styles for this template --> 
    <link href="{% static "css/starter-template.css" %}" rel="stylesheet"> 
</head> 

<body> 

<header class="top-header"> 
    <div class="row"> 
     <div class="col-md-4 text-center"> 
      <a href="{% url "home" %}"><img src="http://stackedservers.com/cdn/PRICE_REFERENCE.png"></a> 
     </div> 
     <div class="col-md-6 text-center search-box"> 
      <form method='GET' action='{% url "home" %}' class="form-inline my-2 my-lg-0"> 
       <div class="input-group input-group-lg"> 
        <input class="form-control form-control-lg" type="text" placeholder="Search" type='text' name='q' 
          placeholder='Search For Products' 
          value='{{ request.GET.q }}'/> 
        <button class="btn" type="submit">Search</button> 
       </div> 
      </form> 
     </div> 
    </div> 
</header> 

<nav class="navbar sticky-top navbar-toggleable-md"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" 
      data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" 
      aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="collapse navbar-collapse" id="navbarsExampleDefault"> 
     <ul class="navbar-nav mr-auto"> 
      <li class="nav-item active"> 
       <a class="nav-link" href="{% url "home" %}">Home <span class="sr-only">(current)</span></a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="{% url "products:best_sellers" %}">Best Sellers</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="{% url "products:products_all" %}">All Products</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="{% url "products:all_categories" %}">All Categories</a> 
      </li> 
     </ul> 

    </div> 
</nav>

CSS

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    /* Margin bottom by footer height */ 
} 

img { 
    max-width: 100%; 
} 
.btn { 
    background-color: #D84728; 
    border-color: #D84728; 
    color: white; 
} 

.btn-success { 
    background-color: #D84728; 
    border-color: #D84728; 
    color: white; 
} 

.btn-price-reference { 
    background-color: #3cc390; 
    border-color: #3cc390; 
    color: white; 
} 

.top-header { 
    padding-top: 1rem; 
    padding-bottom: 1rem; 
    background-color: lightgrey; 
} 
.search-box { 
    padding-top: .3rem; 
} 

.navbar { 
    background-color: #0064b2; 
    margin-bottom: .5rem; 
} 

.nav-item a { 
    color: white; 
    font-family: 'Asul', sans-serif; 
    font-size: 1.2rem; 
} 

/* Home Page */ 

.list-group-item:first-child { 
    border-top-right-radius: 0rem; 
    border-top-left-radius: 0rem; 
    background-color: #3acfef; 
    color: white; 
} 

.list-group-item:first-child h1 { 
    color: white; 
    font-size: 2rem; 
    font-family: 'Kavoon', cursive; 
} 

.list-group-item { 
    font-family: 'Asul', sans-serif; 
} 

.list-group-item-action:focus, .list-group-item-action:hover { 
    background-color: #D84728; 
    color: white; 
} 

.img-fluid { 
    max-height: 320px; 
} 

.carousel-caption h3 { 
    color: #3cc390; 
    font-family: 'Asul', sans-serif; 
} 

.carousel-caption h4 { 
    color: #3cc390; 
    font-family: 'Asul', sans-serif; 
} 

.carousel-indicators li { 
    background-color: #D84728; 
} 

.best-sellers { 
    padding-top: 1.2rem; 
} 

.best-sellers h2 { 
    color: #3cc390; 
    font-family: 'Kavoon', cursive; 
} 

.popular-products { 
    padding-bottom: 1.2rem; 
} 

.product-title { 
    color: #8F8F8E; 
    font-family: 'Asul', sans-serif; 
} 

/*bottom */ 
.bottom_space { 
    margin-bottom: 1em; 
} 

.detail-buttons { 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

.social-buttons { 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

/* footer */ 
footer { background-color:#8F8F8E; min-height:350px; font-family: 'Open Sans', sans-serif; bottom: 0; } 
.footerleft { margin-top:50px; padding:0 36px; } 
.logofooter { margin-bottom:10px; font-size:25px; color:#fff; font-weight:700;} 

.footerleft p { color:#fff; font-size:12px !important; font-family: 'Open Sans', sans-serif; margin-bottom:15px;} 
.footerleft p i { width:20px; color:#999;} 


.paddingtop-bottom { margin-top:50px;} 
.footer-ul { list-style-type:none; padding-left:0px; margin-left:2px;} 
.footer-ul li { line-height:29px; font-size:12px;} 
.footer-ul li a { color:#D84728; transition: color 0.2s linear 0s, background 0.2s linear 0s; } 
.footer-ul i { margin-right:10px;} 
.footer-ul li a:hover {transition: color 0.2s linear 0s, background 0.2s linear 0s; color:#ff670f; } 

.social:hover { 
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
    -o-transform: scale(1.1); 
} 




.icon-ul { list-style-type:none !important; margin:0px; padding:0px;} 
.icon-ul li { line-height:75px; width:100%; float:left;} 
.icon { float:left; margin-right:5px;} 


.copyright { min-height:40px; background-color:#000000;} 
.copyright p { text-align:left; color:#FFF; padding:10px 0; margin-bottom:0px;} 
.heading7 { font-size:21px; font-weight:700; color:#d9d6d6; margin-bottom:22px;} 
.post p { font-size:12px; color:#FFF; line-height:20px;} 
.post p span { display:block; color:#8f8f8f;} 
.bottom_ul { list-style-type:none; float:right; margin-bottom:0px;} 
.bottom_ul li { float:left; line-height:40px;} 
.bottom_ul li:after { content:"/"; color:#FFF; margin-right:8px; margin-left:8px;} 
.bottom_ul li a { color:#FFF; font-size:12px;}

來源

2017-04-08 Tom Myers

全屏輸出請張貼你的問題已經試過的代碼。外部網站將隨着時間的推移而變化，不再與這個問題的未來讀者有關。 – ZimSystem

更新HTML代碼 –

@TomMyers，這是不夠的。您需要使用'<>'按鈕將其轉換爲片段，以便我們看到它的外觀。鏈接當前正在應用的任何資源（css和js），如果你想要的東西有效。此外，您需要包含「鎖定（您的導航）就地」*的部分。 –

這裏是你如何能實現類似的功能，參考網站示例代碼。

$(document).ready(function() { 
 
var $menu = $('#navbar-main'); 
 
var menuOffsetY = $menu.offset().top; 
 
function scroll() { 
 
    if ($(window).scrollTop() >= menuOffsetY) { 
 
     $menu.addClass('fixed-top'); 
 
    } else { 
 
     $menu.removeClass('fixed-top'); 
 
    } 
 

 

 
    } 
 

 
    document.onscroll = scroll; 
 

 
});

body{ 
 
\t min-height: 2000px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 
<nav class="navbar navbar-light bg-faded"> 
 

 
\t \t <div class="row"> 
 
\t \t \t <div class="col"> 
 
    <a class="navbar-brand" href="#">Navbar</a> \t \t \t \t 
 
\t \t \t </div> 
 
\t \t \t <div class="col-8"> 
 
\t <form class="form-inline"> 
 
    <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
 
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
 
    </form> \t \t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 

 

 

 
</nav> 
 
<nav id="navbar-main" class="navbar navbar-toggleable-md navbar-light bg-faded"> 
 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
 
    <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
 
    <ul class="navbar-nav mr-auto"> 
 
     <li class="nav-item active"> 
 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#">Link</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link disabled" href="#">Disabled</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav> \t 
 
<h1>Hello World</h1> 
 
<footer id="footer" class="footer"> 
 
    <p class="text-center"><br>This is my big footer, only test. :)</p> 
 
</footer> \t 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
</body> 
 
</html>

您可以檢查在這裏https://output.jsbin.com/goqaded

來源

2017-04-08 18:02:39 azs06

OP特別要求使用Bootstrap v4。而且您並未將搜索框放置在導航欄內。 –

對不起，使用Bootstrap v4更新了答案，也使得搜索框在較小的屏幕中可見。 – azs06

不幸的是，OP詢問他如何在導航欄變爲固定時隱藏搜索框，而無需告知或顯示導航欄如何固定。截至目前，這個問題是無法回答的。 –

引導4顯示搜索框到位時粘導航鎖

回答

相關問題