All right? First of all I want to thank the help. Well, my question is as follows:
I would like to to scroll the mouse and create a background and decrease the space from the top, also change the logo. The question of the top bottom and then I could do as code below. However, I do not know what to do to change the logo.
HTML:
<div class="col-md-12">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<!-- copy into bootstrap -->
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
<span class="bar4"></span>
<!-- end of code for bootstrap -->
</button>
<h1 class="navbar-brand-spacing">
<a class="navbar-brand navbar-brand page-scroll" href="" title=""></a>
</h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
CSS:
.navbar-brand {
text-transform: none;
margin: 0px;
min-width: 214px;
text-indent: -9999px;
height: 70px;
background: url(../images/logo-telbox.png) no-repeat;
}
.navbar-brand-scroll {
background: url(../images/logo-telbox-scroll.png) no-repeat;
}
JS:
$(window).scroll(function () {
var e = $(this).scrollTop();
e > 60 ? $("header").css("background", "#16181F").css("padding", "0px 0px 10px") : $("header").css("background", "transparent").css("padding", "20px 0px 20px");
});
Thanks :)
So, first off, you have the same class added twice here - <a class="navbar-brand navbar-brand page-scroll" href="" title=""></a>
You may do the following to toggle a class based on the scrollTop
.navbar-brand {
text-transform: none;
margin: 0px;
min-width: 214px;
text-indent: -9999px;
height: 70px;
background: url(../images/logo-telbox.png) no-repeat;
}
.navbar-brand.navbar-brand-scroll {
background: url(../images/logo-telbox-scroll.png) no-repeat;
}
var $header = $("header");
var $logo = $("h1.navbar-brand-spacing > a");
$(window).scroll(function () {
var e = $(this).scrollTop();
if (e > 60) {
$header.css("background", "#16181F").css("padding", "0px 0px 10px");
$logo.addClass('navbar-brand-scroll');
} else {
$header.css("background", "transparent").css("padding", "20px 0px 20px");
$logo.removeClass('navbar-brand-scroll');
}
});
P.S. Scroll triggers for every pixel scrolled and way too much scripts on scroll may choke your browser. Use it sparingly!
Related
I don't code javascript so it is a problem for me to understand how to develop my navbar to look like this: http://www.bootply.com/kD5wiG5udv
I have obviously used common sense and swapped my selectors but it still isn't working. Could someone please advise me on what steps to take next?
Please use the above website to navigate through my code as I am not going to add the bootstrap files to this post. They are too large.
Benjamin
<nav class="navbar navbar-default" role="navigation" id="nav">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="" src="">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li><a href="#">Projects</li>
<li><a href="#">Services</li>
<li><a href="#">About</li>
<li><a href="#">Contact</li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar-default
{
background-color: #fbfbfb;
}
.navbar-nav {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
.scroll-top {
position:fixed;
bottom:0;
right:6%;
z-index:100;
background: #f2f3f2;
font-size:24px;
border-top-left-radius:3px;
border-top-right-radius:3px;
}
.scroll-top a:link,.scroll-top a:visited {
color:#222;
}
.navbar-nav {
margin-left: 50px;
margin-top: -5px;
}
Javascript:
/* affix the navbar after scroll below header */
$('#nav').affix({
offset: {
top: $('header').height()-$('#nav').height()
}
});
/* highlight the top nav as scrolling occurs */
$('body').scrollspy({ target: '#nav' })
/* smooth scrolling for scroll to top */
$('.scroll-top').click(function(){
$('body,html').animate({scrollTop:0},1000);
})
/* smooth scrolling for nav sections */
$('#nav .navbar-nav li>a').click(function(){
var link = $(this).attr('href');
var posi = $(link).offset().top;
$('body,html').animate({scrollTop:posi},700);
});
In my opinion it would be great to do as much as possible in CSS if your website does not to be compatible with old versions of the browsers. I'm not sure if the Bootstrap has it's own way to implement something similar, but here you can get the idea on how you'd do this yourself.
The main role of jQuery here would be just to add a class on scroll event, which would trigger an animation of opacity. This should be much cleaner solution for the problem as it would be smooth and fast. Here is the working fiddle: https://jsfiddle.net/q5jo781c/1/
This part toggles class on scroll:
$(document).ready(function(){
$(document).scroll(function(){
var st = $(this).scrollTop();
if(st > 200) {
$("navbar").addClass('fixed');
} else {
$("navbar").removeClass('fixed');
}
});
});
And the CSS:
navbar {
width: 100%;
display: block;
height: 50px;
background-color: black;
}
navbar.fixed {
position: fixed;
top: 0;
left: 0;
background-color: white;
animation-name: example;
animation-duration: 1s;
}
#keyframes example {
from {opacity: 0;}
to {opacity: 1;}
}
You can find more of the CSS in the fiddle. Hope it helps.
I've quite a long drop down menu on a site I'm working on when it switches over to mobile. For the life of me I cannot get this dropdown navbar toggle to stay open. What it currently does is opens to show all the selections and then it snaps up to only show one possible selection. It's a scrollable menu, but I want it to stay open until it's clicked.... Can anyone see what I'm doing wrong?
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
// Only enable if the document has a long scroll bar
// Note the window height + offset
if (($(window).height() + 100) < $(document).height()) {
$('#top-link-block').removeClass('hidden').affix({
// how far to scroll down before link "slides" into view
offset: {
top: 100
}
});
}
//Fade in for well-trigger on index.html
var divs = $('.well-trigger');
$(window).scroll(function() {
if ($(window).scrollTop() < 480) {
divs.stop(true, true).fadeIn("slow");
} else {
divs.stop(true, true).fadeOut("slow");
}
});
.navbar {
font-family: 'Contrail One', cursive;
padding: 10px;
font-size: 18px;
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.navbar-brand {
padding-top: 5px;
}
.navbar-toggle {
margin: 10px 0;
}
.navbar-inverse {
background-color: #000011;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
height: 80px;
line-height: 80px;
padding-left: 5px;
padding-right: 5px;
}
.navbar-nav li a {
padding-top: 0;
padding-bottom: 0;
margin: 0px -5px 0px -5px;
}
#media (max-width: 767px) {
.navbar-brand {
padding: 0px;
}
.navbar-brand img {
margin-top: 5px;
margin-left: 5px;
margin-bottom: 5px;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
height: 50px;
line-height: 50px;
padding-left: 5px;
padding-right: 5px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://www.example.com/testing/index.html">
<div class="navbar-brand navbar-brand-left">
<img class="hidden-xs" src="img/logo_transparent_REG.png" alt="">
<img class="visible-xs" src="img/logo_transparent_XS.png" alt="">
</div>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
REGISTRATION
</li>
<li>
COURSE OVERVIEW
</li>
<li>
SERVICES
</li>
<li>
INSTRUCTORS
</li>
<li>
BLOG
</li>
<li>
CONTACT
</li>
<li>
LINKS
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
You have set the height to 50px in the #media-query. Change it to auto, and all is well.
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
// Only enable if the document has a long scroll bar
// Note the window height + offset
if (($(window).height() + 100) < $(document).height()) {
$('#top-link-block').removeClass('hidden').affix({
// how far to scroll down before link "slides" into view
offset: {
top: 100
}
});
}
//Fade in for well-trigger on index.html
var divs = $('.well-trigger');
$(window).scroll(function() {
if ($(window).scrollTop() < 480) {
divs.stop(true, true).fadeIn("slow");
} else {
divs.stop(true, true).fadeOut("slow");
}
});
.navbar {
font-family: 'Contrail One', cursive;
padding: 10px;
font-size: 18px;
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.navbar-brand {
padding-top: 5px;
}
.navbar-toggle {
margin: 10px 0;
}
.navbar-inverse {
background-color: #000011;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
height: 80px;
line-height: 80px;
padding-left: 5px;
padding-right: 5px;
}
.navbar-nav li a {
padding-top: 0;
padding-bottom: 0;
margin: 0px -5px 0px -5px;
}
#media (max-width: 767px) {
.navbar-brand {
padding: 0px;
}
.navbar-brand img {
margin-top: 5px;
margin-left: 5px;
margin-bottom: 5px;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
height: auto;
line-height: 50px;
padding-left: 5px;
padding-right: 5px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://www.example.com/testing/index.html">
<div class="navbar-brand navbar-brand-left">
<img class="hidden-xs" src="img/logo_transparent_REG.png" alt="">
<img class="visible-xs" src="img/logo_transparent_XS.png" alt="">
</div>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
REGISTRATION
</li>
<li>
COURSE OVERVIEW
</li>
<li>
SERVICES
</li>
<li>
INSTRUCTORS
</li>
<li>
BLOG
</li>
<li>
CONTACT
</li>
<li>
LINKS
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
Use this jsFiddle instead of Stack Snippet
$(".dropdown li a").dblclick(function(){
//alert('Long pressed');
$(this).parent().toggleClass('selected');
if ($('.dropdown li').hasClass('selected')) {
// alert('1 Item selected');
$(this).parent().parent().parent().parent().parent().parent().find('.header').find('.dropdown-title').addClass('hide');
$(this).parent().parent().parent().parent().parent().parent().find('.deleteli').removeClass('hide');
$(this).parent().parent().parent().parent().parent().parent().find('.deleteli').addClass('show');
}
else {
$(this).parent().parent().parent().parent().parent().parent().find('.header').find('span').removeClass('hide');
$('.delete').removeClass('show');
$('.delete').addClass('hide');
// alert('1 Item dis selected');
}
});
$('a#deletelibtn').click(function () {
// body...
// alert('deletelibtn clicked')
$(this).parent().parent().find('.selected').remove();
$(this).parent().find('.dropdown-title').removeClass('hide');
$(this).parent().find('.dropdown-title').addClass('show');
})
/*Dropdown Messages*/
.messages-dropdown{
width: 300px;
}
.messages-dropdown .header{
padding: 15px;
border-bottom: 1px solid #ccc;
}
.messages-dropdown .header small{
float: right;
}
.messages-dropdown .header small a{
font-style: 9px;
margin-left: 5px;
}
.messages-dropdown .footer{
text-align: center;
border-top: 1px solid #ccc;
}
.messages-dropdown .footer a{
padding: 15px;
}
.messages-items{
list-style: none;
padding: 0;
padding-left: 0px;
margin: 0;
}
.messages-items .Mitem {
padding: 10px;
padding-left: 10px;
border-left: 3px solid transparent;
}
.messages-items .Mitem:hover {
background: #f0f0f0;
border-color: #3a3f51;
}
.messages-items .Mitem a {
display: inline-block;
width: 100%;
}
.messages-items .Mitem a:hover {
text-decoration: none;
background: #f0f0f0;
}
.messages-items .Mitem a b{
color: #444;
letter-spacing: 1px;
}
.messages-items .Mitem a small{
color: #999;
letter-spacing: 1px;
}
.messages-items .Mitem img{
float: left;
margin-right: 10px;
border-radius: 100% !important;
padding: 5px;
border: 1px solid #ccc;
width: 40px;
height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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>
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="icon icon-li-envelope message-bell"></i>
<span class="badge message-badge">4</span>
</a>
<ul class="dropdown-menu messages-dropdown">
<li class="header">
<span class="dropdown-title">
heading
</span>
<a class="#delete" id="deletelibtn">
delete
</a>
</li>
<div id="message">
<li>
<ul class="messages-items">
<li class="Mitem">
<a href="#MessageItem">
content
</a>
</li>
</ul>
</li>
<li>
<ul class="messages-items">
<li class="Mitem">
<a href="#MessageItem">
content
</a>
</li>
</ul>
</li>
<li>
<ul class="messages-items">
<li class="Mitem">
<a href="#MessageItem">
content
</a>
</li>
</ul>
</li>
<li>
<ul class="messages-items">
<li class="Mitem">
<a href="#MessageItem">
content
</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
When I select the messages the deletelibtn option is enabled and I'm able to delete the messages, but after deleting the messages the deletelibtn button is not hiding and then again if am selecting the messages again the delete option is not showing.
When the deletelibtn option is showing the dropdown-title should be hidden, similarly when the dropdown-title is visible the deletelibtn button should be hidden.
I hope I explained what I need exactly.
I changed several little things which wouldn't affect functionality but are 'best practice'. There were a couple of small targeting issues as well which are what caused the functional problem. The reason it was so hard to debug is because your html was a but jumbled and you reused the same words over and over making it hard to follow the logic. Here is the corrected js.
$('.dropdown-menu li').on('click', function(event){
//The event won't be propagated to the document NODE and
// therefore events delegated to document won't be fired
event.stopPropagation();
});
$("ul.messages-items a").dblclick(function(){
$(this).closest('ul.messages-items').parent().addClass('selected');
var $container = $(this).closest('div.container-fluid')
if ($('li.dropdown').hasClass('open')) {
$container.find('.header').find('.dropdown-title').removeClass('show').addClass('hide');
$container.find('.deleteli').removeClass('hide').addClass('show');
}
else {
$container.find('.header').find('span').removeClass('hide').addClass('show');
$('.delete').removeClass('show').addClass('hide');
}
});
$('a#deletelibtn').click(function () {
var $this = $(this);
$('#message').find('li.selected').remove();
$this.parent().find('.dropdown-title').removeClass('hide').addClass('show');
$this.find('i.deleteli').removeClass('show').addClass('hide');
})
https://jsfiddle.net/xctgo71x/23/
You can add this off-click event to reset the dropdown.
$(document).click(function(e){
//console.log(e);
if(true)
ResetDropdown();
});
function ResetDropdown(){
$('span.dropdown-title').removeClass('hide').addClass('show');
$('i.deleteli').removeClass('show').addClass('hide');
$('#message').find('li.selected').removeClass('selected');
}
It works ok on the jsfiddle but on your actual code you may need to tweak it a little.
https://jsfiddle.net/xctgo71x/29/
I just wanted to place my bootstrap nav bar inside the full width slider just like this.
This is the full width slider
http://codepen.io/grovesdm/pen/MazqzQ
I've placed the nav bar on top and put slider code after that. Now it's looks like this.
If I remove the nav bar background color and make that div transparent, nothing happened. If I need to place the slider inside the slider?
I think you want this :
/*! http://mths.be/slideshow v1.0.0 by #mathias */ ;
(function($) {
$.fn.slideshow = function(options) {
options = $.extend({
'timeout': 3000,
'speed': 400 // 'normal'
}, options);
// We loop through the selected elements, in case the slideshow was called on more than one element e.g. `$('.foo, .bar').slideShow();`
return this.each(function() {
// Inside the setInterval() block, `this` references the window object instead of the slideshow container element, so we store it inside a var
var $elem = $(this);
$elem.children().eq(0).appendTo($elem).show();
// Iterate through the slides
setInterval(function() {
$elem.children().eq(0)
// Hide the current slide and append it to the end of the image stack
.hide().appendTo($elem) // As of jQuery 1.3.2, .appendTo() returns the inserted element
// Fade in the next slide
.fadeIn(options.speed)
}, options.timeout);
});
};
}(jQuery));
// Name the slider
$(function() {
$('.slider').slideshow({
timeout: 7000,
speed: 1000
});
});
* {
padding: 0;
margin: 0;
}
/*section {
border: 10px solid green;
}
body {
border: 10px solid orange;
}*/
.slider {
position: relative;
width: 100%;
height: 100vh;
}
.slider li {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
list-style: none;
}
.slider li .slide {
background-size: cover;
background-position: center center;
height: 100%;
width: 100%;
}
.slider li .slide figcaption {
font-family: sans-serif;
text-transform: uppercase;
letter-spacing: -1px;
color: white;
text-shadow: 0 0 5px black;
font-size: 60px;
text-align: center;
position: absolute;
top: -30px;
margin-top: 50vh;
left: 0;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<body>
<section>
<nav class="navbar navbar-fixed-top">
<div class="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 class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<ul class="slider">
<li>
<figure class="slide" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/260511/1d9326c2ae66befef4e39c3426adf17a.jpg)">
<figcaption>hello</figcaption>
</figure>
</li>
<li>
<figure class="slide" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/260511/______by_Thoum.jpg)">
<figcaption>yeah</figcaption>
</figure>
</li>
</li>
</ul>
</section>
<p>Hello</p>
</body>
I was looking for very long time for pretty solution for dynamic affix with Bootstrap 3 and finally my simply solution is below. Everything works great, except one feature. When i resize website to mobile and expand menu, whole list of menu items is transparent. When i starting scroll down, after the moment when navbar is affixed transparent problem does not exist. I read some posts that it can be caused by relative position for navbar but dont know how resolve this problem and dont loss my functionality.
<div id="nav-wrapper">
<div id="nav" class="navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class=" collapse navbar-collapse navbar-center" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">ZESPÓL</li>
<li>ZAPLECZE</li>
<li>GALERIA</li>
<li>MATERIALY</li>
<li>KONTAKT</li>
</ul>
</div>
</div>
</div>
<!-- navbar -->
</div>
js:
function myaffix() {
var affixoffset = $('.navbar-inverse').offset().top
$('#nav-wrapper').height($(".navbar-inverse").height());
$(window).scroll(function() {
if ($(window).scrollTop() <= affixoffset) {
$('.navbar-inverse').removeClass('affix');
} else {
$('.navbar-inverse').addClass('affix');
}
});
};
$(document).ready(function() {
myaffix();
$(window).on("resize", function() {
myaffix();
});
});
and part of my css:
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
#nav > .navbar-inner {
border-left: 0;
}
.navbar-toggle
{
float:none;
}
.navbar-header
{
text-align:center;
}
.navbar-inverse .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar-inverse .navbar-collapse {
text-align: center;
}