bootstrap实现sticky粘性固定头部导航效果代码-html代码-BFW代码库

bootstrap实现sticky粘性固定头部导航效果代码

代码语言：html

代码描述：bootstrap实现sticky粘性固定头部导航效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
  
<style>
/*sticky header position*/
.sticky.is-sticky {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
}

body {
  min-height: 1200px;
}
nav {
  background: #eaebec;
  min-height: 85px;
}
</style>


</head>

<body >
  <!--top header-->
        <header >
            <!--most top info -->
            <div style="height: 40px; background: #f2f9ee"></div>
            <!-- End most top info -->

            <nav class="navbar  navbar-expand-lg navbar-light top-navbar" data-toggle="sticky-onscroll">
                <div class="container">
                    <a class="navbar-brand" href="#">Navbar</a>
                    <button class="navbar-toggler" 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 justify-content-end" id="navbarSupportedContent">
                        <ul class="navbar-nav pull-right">
                            <li class="nav-item">
                                <a class="nav-link active" href="#">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Services</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Our Work</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">.........完整代码请登录后点击上方下载按钮下载查看