Question

我正在使用Bootstrap 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;}

Answer 1

以下是如何为参考网站实现类似功能的示例代码。

＆＃13;

$(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;

});

＆＃13;

body{
	min-height: 2000px;
}

＆＃13;

<!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">

		<div class="row">
			<div class="col">
  <a class="navbar-brand" href="#">Navbar</a>				
			</div>
			<div class="col-8">
	<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>				
			</div>
		</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>	
<h1>Hello World</h1>
<footer id="footer" class="footer">
  <p class="text-center"><br>This is my big footer, only test. :)</p>
</footer>	
<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>

＆＃13;

您可以在此处全屏检查输出https://output.jsbin.com/goqaded

粘性导航锁定到位时，Bootstrap 4显示搜索框

1 个答案: