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>
Related
I am making a website with a free template and i dont know JS really well. So i made a research and figured JS causing the problem.
So here is the relevant HTML and JS codes:
var clickMenu = function() {
$('#navbar a:not([class="external"])').click(function(event) {
var section = $(this).data('nav-section'),
navbar = $('#navbar');
if ($('[data-section="' + section + '"]').length) {
$('html, body').animate({
scrollTop: $('[data-section="' + section + '"]').offset().top - 55
}, 500);
}
if (navbar.is(':visible')) {
navbar.removeClass('in');
navbar.attr('aria-expanded', 'false');
$('.js-fh5co-nav-toggle').removeClass('active');
}
event.preventDefault();
return false;
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<!-- Mobile Toggle Menu Button -->
<i></i>
<a class="navbar-brand" href="index.html"><span>X</span>XXX XXXX</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span>Home</span></li>
<li><span>About</span></li>
<li><span>Services</span></li>
<li><span>Contact</span></li>
</ul>
</div>
</div>
</nav>
At the bottom of the function, the return false; statement is triggering on every link; regardless of whether it's an in page anchor, or linking to another page. This will prevent the browser from jumping to other pages.
I've changed your (relevant) code around some, and posted some new jQuery (with comments):
The target was removed from data-nav-section, and placed directly into the href. This reduces some superfluous code, as well as makes it so these will function on browsers without script support. Instead of a nice scroll, they will simply jump. But - since the JS is being used to stop the browser's functionality - browsers with script support will function fine.
I am using rel="external" instead of 'class="external", becauseclassis only useful to CSS;rel` can be used just as easily by CSS, but can also be interpreted by automated systems (like bots and search engines).
I've also replaced the class="active", with aria-current="page". Again, CSS works with both equally well, but aria-current="" works with accessible systems (i.e. screen readers).
NOTE: I am unsure what the if (navbar.is(':visible')) {... code block is for, so I have left it out of my example for now.
$('document').ready(() => {
$('#navbar a:not([rel="external"])').on('click', function(event) {
// Assign target element to the variable targetElement.
let targetElement = $("#" + $(this).attr('href').split('#')[1]);
// If the target element exists, it will have a length. If it doesn't exist, the browser will do its own thing.
if (targetElement.length) {
// Scroll browser window to the top of the element (-55px)
$('html, body').animate({
scrollTop: targetElement.offset().top - 55
}, 500);
// End funtion processing, and prevent the browser from performing any more actions.
return false;
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<!-- Mobile Toggle Menu Button -->
<i></i>
<a class="navbar-brand" href="index.html"><span>X</span>XXX XXXX</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li aria-current="page"><span>Home</span></li>
<li><span>About</span></li>
<li><span>Services</span></li>
<li><span>Contact</span></li>
</ul>
</div>
<div id="about" style="height: 200px; width=900px; background-color: #0F0;">
<h2>About</h2>
</div>
<div id="services" style="height: 200px; width=900px; background-color: #00F;">
<h2>Services</h2>
</div>
<div id="contact" style="height: 200px; width=900px; background-color: #F00;">
<h2>Contact</h2>
</div>
</div>
</nav>
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.
I trying to hide my nav on scroll down and show on scroll up only when in mobile mode. I have a example that i found from another website that uses a script that does the same only i'm not really good in unraveling and adjusting it to my situation. You see it working when the browser size is small.
--> Example website
I have a navigation that has two versions: one inline when in large screen size and position is absolute and the second in mobile screen size with a hamburger icon the open the menu items under each other.
--> Fiddle
<header>
<nav>
<div class="mobile-nav">
<div class="nav-toggle"><i class="nav-icon"></i></div>
</div>
<ul class="left-nav">
<li class="home">Pixelation</li>
</ul>
<ul class="right-nav">
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
Part of the script of example website
hideShowMobileNav = function(setOldScroll) {
if (stateMap.scrollTop != stateMap.oldScrollTop && stateMap.scrollTop > 100) {
if (stateMap.scrollTop > stateMap.oldScrollTop) {
jqueryMap.$nav.addClass('hidden');
} else {
jqueryMap.$nav.removeClass('hidden');
}
}
if (setOldScroll) {
stateMap.oldScrollTop = stateMap.scrollTop;
}
};
You could use device detection
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
// Do something
} else {
// Do something else
}
or width() function
or some sort of css media query
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 having problems implementing the following jQuery effect to my navigation.
There will be the following image on the top of the screen:
menu link http://img820.imageshack.us/img820/2707/linkz.jpg
When the user clicks on this, the following menu should scroll out:
nav http://img805.imageshack.us/img805/2383/menue.jpg
my HTML is as follows:
<div class="left_corner"><img src="images/homepage_menu_lft.gif" alt="corner" /></div>
<div class="header_buttons typeface-js" style="font-family: Palatino LT Std">
<ul>
<li> womens swimsuits <span class="bars">|</span></li>
<li> womens wetsuits <span class="bars">|</span></li>
<li> artist series <span class="bars">|</span></li>
<li> blog <span class="bars">|</span></li>
<li> short film <span class="bars">|</span></li>
<li> photo gallery <span class="bars">|</span></li>
<li> store locator </li>
</ul>
<div class="right_corner"><img src="images/homepage_menu_rght.gif" alt="corner" /></div>
</div>
Any help would be greatly appreciated.
If that menu-button is all the way left in the browser, you could just do a negative margin-left, and pull the entire menu (except for the menu-button) out of the screen. When the user clicks the button, you can (with the jQuery "animate" function) slide the menu out.
function MenuSlideOut () {
$("div#Menu").animate({
left: 0
}, "slow");
}
function MenuSlideIn () {
$("div#Menu").animate({
left: "-600px"
}, "slow");
}
Haven't tested that code though, but something like that. You can perhaps do it with some sort of toggle instead. Try http://api.jquery.com