视频覆盖的Bootstrap导航栏 - 如何用不透明背景覆盖它?

时间:2016-02-29 13:54:38

标签: javascript html css twitter-bootstrap

我有这段代码:https://jsfiddle.net/j712e84o/4/

我想通过导航栏添加视频。我通过css代码完成它以覆盖它。

  

top:-100px;

现在我试图通过运行来添加不透明度背景:

  

background-color:rgba(0,0,0,0.5);

  1. 我试图用index-z克服它,但它没有用。我面临的下一个问题是视频和下一段之后的100px白色差距。
  2. +。导航栏应该挤压移动设备,但它没有。

    你能帮帮我吗?这是代码

    视频CSS:

    .covervid-video {
      position: relative;
      right: 0;
      bottom: 0;
      width: 100%    !important;
      height: auto   !important;
      z-index: 10;
      top: -100px;
      background-size: cover;
    }
    

    Navbar CSS:

    html,
    body {
        overflow-x: hidden; /* Prevent scroll on narrow devices */
    }
    body {
        padding-top: 100px;
        height: -116px;
    }
    footer { padding: 30px 0; }
    
    .navbar-brand { font-size: 24px; }
    
    .navbar-container { padding: 20px 0 20px 0; }
    
    .navbar.navbar-fixed-top.fixed-theme {
        background-color: #FFF;
        border-color: #373737;
        box-shadow: 0 0 2px rgba(0,0,0,.8);
    }
    
    .navbar-brand.fixed-theme { font-size: 18px; }
    .navbar-container.fixed-theme { padding: 0; }
    
    .navbar-brand.fixed-theme,
    .navbar-container.fixed-theme,
    .navbar.navbar-fixed-top.fixed-theme,
    .navbar-brand,
    .navbar-container{
        transition: 0.8s;
        -webkit-transition:  0.8s;
    }
    

    Navbar JS:

    $(document).ready(function(){
    
    /**
     * This object controls the nav bar. Implement the add and remove
     * action over the elements of the nav bar that we want to change.
     *
     * @type {{flagAdd: boolean, elements: string[], add: Function, remove: Function}}
     */
    var myNavBar = {
    
        flagAdd: true,
    
        elements: [],
    
        init: function (elements) {
            this.elements = elements;
        },
    
        add : function() {
            if(this.flagAdd) {
                for(var i=0; i < this.elements.length; i++) {
                    document.getElementById(this.elements[i]).className += " fixed-theme";
                }
                this.flagAdd = false;
            }
        },
    
        remove: function() {
            for(var i=0; i < this.elements.length; i++) {
                document.getElementById(this.elements[i]).className =
                        document.getElementById(this.elements[i]).className.replace( /(?:^|\s)fixed-theme(?!\S)/g , '' );
            }
            this.flagAdd = true;
        }
    
    };
    
    /**
     * Init the object. Pass the object the array of elements
     * that we want to change when the scroll goes down
     */
    myNavBar.init(  [
        "header",
        "header-container",
        "brand"
    ]);
    
    /**
     * Function that manage the direction
     * of the scroll
     */
    function offSetManager(){
    
        var yOffset = 0;
        var currYOffSet = window.pageYOffset;
    
        if(yOffset < currYOffSet) {
            myNavBar.add();
        }
        else if(currYOffSet == yOffset){
            myNavBar.remove();
        }
    
    }
    
    /**
     * bind to the document scroll detection
     */
    window.onscroll = function(e) {
        offSetManager();
    }
    
    /**
     * We have to do a first detectation of offset because the page
     * could be load with scroll down set.
     */
    offSetManager();
    });
    

    HTML

    <!-- Fixed navbar -->
    <nav id="header" class="navbar navbar-fixed-top">
      <div id="header-container" class="container navbar-container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a id="brand" class="navbar-brand" href="/">CV Star</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse pull-right">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/">Domů</a></li>
            <li><a href="#about">Služby</a></li>
            <li><a href="#contact">Kontakt</a></li>
            <li><a href="#" class="btn-primary" type="button">CV Review</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </nav><!-- /.navbar -->
    <!-- </div> -->
    
    <video autoplay="" class="covervid-video" loop="" poster="img/video-fallback.png">
      <source src="videos/clouds.webm" type="video/webm"><source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
    </video>
    
    <p>
    - What is the white gap above?<br>
    - Why the menu does not show on mobile devices in one button?<br>
    </p>
    

    谢谢

1 个答案:

答案 0 :(得分:1)

在视频之前添加绝对位置叠加div ..

SetBasicAuthentication(elasticUser, elasticPassword);

演示:http://bootply.com/LJxKFcJ6ts