我有这段代码:https://jsfiddle.net/j712e84o/4/
我想通过导航栏添加视频。我通过css代码完成它以覆盖它。
top:-100px;
现在我试图通过运行来添加不透明度背景:
background-color:rgba(0,0,0,0.5);
+。导航栏应该挤压移动设备,但它没有。
你能帮帮我吗?这是代码视频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>
谢谢
答案 0 :(得分:1)
在视频之前添加绝对位置叠加div ..
SetBasicAuthentication(elasticUser, elasticPassword);