Here is a pen. I also have a live version.
I created a responsive nav with dropdowns, and everything works perfectly. I was working on making it sticky, as in after you scroll past a certain point, it becomes fixed to the top.
It works fine, except when you resize the page until the responsive hamburger menu shows up and click on it. The page then jumps to the top.
Here's my code for the sticky.
$(window).scroll(function () {
if ($(window).scrollTop() >= $("header").height() + 30) {
$(".sticky").addClass("fixed");
$(".content").addClass("margin");
} else {
$(".sticky").removeClass("fixed");
$(".content").removeClass("margin");
}
});
And here's my css where the hamburger lives.
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #efefef;
height: 70px;
width: 70px;
}
And here is the code for the navbar.
<section class="navigation sticky">
<div class="nav-container">
<div class="brand">
Primitive
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
</ul>
</nav>
</div>
</section>
Nothing has a fixed height outside of the sticky class.
Thanks!
Here is the fixed code.
<section class="navigation sticky">
<div class="nav-container">
<div class="brand">
Primitive
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
</ul>
</nav>
</div>
</section>
To prevent an action happening on click toggle, add href="#!" to the a tag. Now the screen no longer jumps to the top when I click on the hamburger nav.
Related
I have the following problem: The navbar is supposed to hide when scrolling down and appear when scrolling up. Works perfectly in Firefox, but in Chrome and Safari (and other browsers?) the navbar hides also when I scroll back up and hit the very top of the page, so the little "bounce" created when hitting the top and it "snaps" back into original position creats a down sroll that tells the navbar to hide again. It is the opposite thing when reaching the end, due to the "bounce" at the botton that creates the upscroll "snap" and the navbar appears. I want both of these events to not happen (the little bounces should get ignored if that is possible). I know what causes the problem but I do not know how to engage and manipulate the responsible elements. As you might have noticed I am a beginner and just entering the world of JavaScript, so any explanations beside a solution are appreaciated. I am using normalize.css as well if that is necessary information. I hope I have provided every relevant code snippet. Thanks in advance, this place is dope!
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("fader").style.top = "0";
} else {
document.getElementById("fader").style.top = "-100%";
}
prevScrollpos = currentScrollPos;
}
.nav-wrapper {
width: 100%;
position: fixed;
top: 0;
transition: top 0.7s;
}
<header class="nav-wrapper bg-dark" id="fader">
<nav class="navbar">
<img class="pic" src="assets/pic.svg" alt="Pic" />
<img class="logo" src="assets/logo.svg" alt="Logo" />
<div class="menu-toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="nav no-search">
<li class="nav-item">One</li>
<li class="nav-item">Two</li>
<li class="nav-item">Three</li>
<li class="nav-item">Four</li>
<li class="nav-item">Five</li>
</ul>
</nav>
</header>
I have a hamburger menu which is almost complete with just 1 bug/issue that I can't figure out. My nav links to different areas on the home page. So on the home page the user can click a nav link which would instantly take them down to the desired location on the page.
My issue comes as there is no loading so once the user clicks on the nav link they are brought to the location but the dropdown menu will not close. I tried adding .hide to the JS which hides the dropdown on the click of a link but that created my new issue.
After the user clicks one of the nav links it does hide the menu but upon clicking the menu icon again the menu will not open at all. In dev tools I see that upon clicking one of the nav links it is given the style of display:none so I feel that the issue might lie there. Thanks for the help and please let me know if any other information is needed!
HTML:
<nav class="navbar navbar-light navbar-fixed-top">
<div class="wrapping container-fluid">
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav navbar-nav float-sm-right mr-0 menu">
<li class="nav-item">
<span class="sr-only"></span>
</li>
<li class="nav-item">
<a class="nav-link" href="#schedule">Schedule<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#workshops">Workshops</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#locations">Location</a>
</li>
<li class="nav-item">
<a class="nav-link last-link" href="#register">Register</a>
</li>
</ul>
<a class="navbar-brand" href="#home"><img class="logo" src="img/Logo.png" alt=""></a>
</div>
</nav>
CSS for this menu:
.menu{
height: 0;
overflow: hidden;
transition: height 0.3s;
}
.open{
height: 295px;
}
.hamburger {
cursor: pointer;
padding: 15px 10px 15px 0;
display: block;
float: right;
margin-top: 15px;
}
JS:
$('.hamburger').on('click', function () {
$('.menu').toggleClass('open');
});
$( '.menu a' ).on("click", function(){
$('.menu').hide();
});
If you're going to use .toggleClass('open') to open the menu, use it for closing the menu as well.
Generally, though, you'll want to use .addClass() and .removeClass() instead:
$('.hamburger').on('click', function () {
$('.menu').addClass('open');
});
$( '.menu a' ).on("click", function(){
$('.menu').removeClass('open');
});
If your hamburger menu has checkbox behind it, you can simple set it to unchecked to close the hamburger menu
function hideMenu(){
let menuOpen = document.querySelector('.toggler').checked;
if(menuOpen = true){
document.querySelector('.toggler').checked = false;
}
}
window.addEventListener("scroll", hideMenu);
I'm learning bootstrap and I'd like my custom horizontal navbar to stick at the top of the page once it reaches it (like this).
I have tried to add an affix class to my CSS as well as a piece of JS code, but that does not work. What is the issue?
See https://jsfiddle.net/bs7bdpmh/
html
<div id="nav" class="container-fluid">
<nav class="navbar-classic">
<li>Who are we?
<ul class="dropdown">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li>Services Services Services
</li>
<li>Products Products Products
</li>
</nav>
CSS
#nav.affix {
position: fixed;
top: 0;
width: 100%;
height: 70px;
background: #fff;
z-index:10;
}
JS
$('#nav').affix({
offset: {
top: $('header').height()
}
});
You mean something like this ?
See this fiddle
JS :
$(window).scroll(function(){
scrollTop = $(window).scrollTop();
if(scrollTop > 50){
$('#nav').addClass('affix');
}else{
$('#nav').removeClass('affix');
}
});
Of course, it's not perfect, I let you adapt the CSS code and HTML structure ;)
If you are using normal bootstrap the solution is easy
<style>
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active">Basic Topnav</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
and if you want to change the navbar when you scroll to the bottum just use something like:
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() == $(document).height())
{
$('#nav').addClass('affix');
}
});
I'm trying to implement a sidebar to my Twitter Bootstrap 3 application. When I click a button, a fixed positioned nav nav-pills nav-stacked appears on the left side of my page. And I gave z-index:1000, so it appears on top of my content.
Fiddle: http://jsfiddle.net/mavent/8YtDS/14/
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header"> <a class="navbar-brand navbar-left" href="/" title="">
MyBrand
</a>
</div>
</nav>
<div class="col-md-3" id="mysidebar" style=" top: 0;bottom:0; left: 10px;
position: fixed; height: 100%; background-color: #faff18;
opacity: 0.9; overflow: hidden; z-index:1000; margin: 0; padding: 0; display:none;">
<div style="position: relative; top: 60px; background-color: #7d1c80; opacity: 0.9;">
<ul class="nav nav-pills nav-stacked">
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
<li>Do something
</li>
</ul>
</div>
</div>
<div class="row" style="background-color: #aaa;">
<div class="col-md-offset-3">
<button> </button>
<button id="mybutton" type="button" class="btn btn-info">Click me to toggle</button>
</div>
</div>
But I need different behaviour, when sidebar appears my page will be pushed to right side. Check this page and click top left button. How can I get this behaviour with css/js ?
http://jpanelmenu.com/
A general practice would be to add a class to either the <body> tag or a main wrapper called something like navopened on the button click.
Once the class is added, you then can target any element using the class, and move your 'entire' page with either positioning: position:relative; right: -[nav width]px
or transforms: transform: translate([nav width]px)
Transforms have better performance, but less browser support.
CSS Example:
/* before, without body class added */
body #outsidewrapper{
position:relative;
right:0px;
}
/* after, when the click event adds the class to the body */
body.navopened #outsidewrapper{
position:right:-300px;
}
Now, it's important to note that you shouldn't be moving the body tag itself, as it has potential to hide your nav. I would move an outer wrapper instead.
I can see two ways to accomplish this.
Replace position: fixed with float: left.
a. See http://jsfiddle.net/kdcTc/
b. Without bootstrap http://jsfiddle.net/5kPNd/
Moving the sidebar to the top, makes the top navbar shift to the right as well. This does not work with bootstrap. It seems, there is some condition in the bootstrap navbar classes, which prevents the shift.
The class navbar-fixed-top seems to pin the top navbar. Removing it allows the brand navbar to shift, but has other side effects too.
Move the main panel and the navbar to the right, using a margin-left
See http://jsfiddle.net/7eEaB/2/
Okay, so I did a few play arounds, one with my code and one with your code.
edited your one...
http://jsfiddle.net/8YtDS/15/
My one (button placement is pore, but you get the picture)
http://jsfiddle.net/e6JnT/1/
My one can toggle it in and out...
The main part's is having a wrapper around the part's you want to move around... which would be your code in your case, and then you just move that or resize that accordingly.
I did slide it left but you can do it with size so you don't miss anything.
So into the code.
$("#mybutton").click(function () {
$("#wrapper").animate({
left: '200px'
});
$("#mysidebar").animate({
left: '0px'
});
});
So I use the animate function in jQuery as it's the most versatile function to move an element around and making it look nice.
and all I'm doing is sliding the element to the left to 200px to make room for the menu, and the slide the element with an id of 'myslidebar' to '0px' to make it able to been seen.
Edit: http://jsfiddle.net/8YtDS/18/
Try this...
http://jsfiddle.net/8YtDS/17/
HTML
<div id="wrapper">
<div id="menu-panel">
<ul class="nav nav-pills nav-stacked">
<li>Do something</li>
<li>Do something</li>
<li>Do something</li>
<li>Do something</li>
</ul>
</div>
<div id="content">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand navbar-left" href="/" title="">
MyBrand
</a>
</div>
</nav>
<button id="mybutton" class="btn btn-primary">Click me</button>
</div>
</div>
CSS
#wrapper{
position: relative;
height: 100%;
background: #F90;
}
#menu-panel{
width: 100px;
position: absolute;
left: -100px;
top: 0;
height: 100%;
}
#wrapper.open{
margin-left: 100px;
}
Javscript
$("#mybutton").click(function () {
$("#wrapper").toggleClass("open");
});
Just a note from experience: avoid using jQuery animate to 'smooth' the slide. On certain browsers it was very jittery for me. CSS transforms should be used if possible, as I believe they are handled by GPU, jQuery as a fail safe (see Modernizr).
Hope that was of some help!
Thanks
Phil
I am trying to put a layout together with jquery-ui-layout and can't overcome the height problem.
Here's the HTML code:
<body>
<div id="wrapper">
<div id="header">
<a class="logo" href="/">
<img src="/media/bdo.png" width="154" height="38"/>
</a>
<ul class="top-menu">
<li>report fill out</li>
<li>browse reports</li>
</ul>
<div class="user">
hi there
</div>
</div>
<div id="content">
<div class="ui-layout-west" id="consultants">west</div>
<div class="ui-layout-center" id="contacts">center</div>
<div class="ui-layout-east" id="details">east</div>
</div>
</div>
<div id="footer">
<ul class="links">
<li>help</li>
<li>report an issue</li>
</ul>
</div>
</body>
There is styles.css I use for all the pages (it's rather large to past into here).
The javascript I use for this is rather simple, too:
<script type="text/javascript">
$(document).ready(function(){
myLayout = $("#content").layout({
applyDefaultStyles: true
});
myLayout.sizePane('west',500);
});
</script>
But the output is that all three panels are so short as per the screenshot below. How can I fix the height of the layout to fit the whole page and go all the way down to the footer?
The layout manager will use the size of the container to determine it's layout logic. In this case you have not specified any height for the content div <div id="content">...</div>. Just as a quick example change your css like so:
#content {
float: left;
clear: both;
width: 100%;
height: 500px;
padding: 10px 0 20px;
}
If you want to have the content fill the space between your header and footer you should use two layouts one for north (header), centre (content), south (footer) and again in your content you apply a second layout for your west, centre, east panels.