How to hide/show nav bar when user scrolls up/down - javascript

Hide/show nav bar when user scrolls up/down
Here's the example I'm trying to achieve:
http://haraldurthorleifsson.com/
or
http://www.teehanlax.com/story/readability/
The navigation bar slides up off screen when you scroll down and slides back down on screen when you scroll up. I've figured out how to do it with fade in/fade out but I would like to achieve it with the exact same animation as in the example. Note: I already tried SlideIn() and like the way that it does the stretching animation...
JQUERY:
var previousScroll = 0,
headerOrgOffset = $('#header').offset().top;
$('#header-wrap').height($('#header').height());
$(window).scroll(function() {
var currentScroll = $(this).scrollTop();
console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset);
if(currentScroll > headerOrgOffset) {
if (currentScroll > previousScroll) {
$('#header').fadeOut();
} else {
$('#header').fadeIn();
$('#header').addClass('fixed');
}
} else {
$('#header').removeClass('fixed');
}
previousScroll = currentScroll;
});
CSS:
#header {
width: 100%;
z-index: 100;
}
.fixed {
position: fixed;
top: 0;
}
#header-wrap {
position: relative;
}
HTML:
<div id="header-wrap">
<div id="header" class="clear">
<nav>
<h1>Prototype</h1>
</nav>
</div>
</div>

To get the inner content of the nav to slide up instead of being progressively hidden, you need to do the animation on the parent element, and keep the inner element at the bottom of the parent, like so:
jsfiddle
<div id="header-wrap">
<div id="header" class="clear">
<nav><h1>Prototype</h1>another line<br/>another line
</nav>
</div>
</div>
css
body {
height: 1000px;
}
#header {
width: 100%;
position: absolute;
bottom: 0;
}
#header-wrap {
width: 100%;
position: fixed;
background-color: #e0e0e0;
}
js
var previousScroll = 0,
headerOrgOffset = $('#header').height();
$('#header-wrap').height($('#header').height());
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > headerOrgOffset) {
if (currentScroll > previousScroll) {
$('#header-wrap').slideUp();
} else {
$('#header-wrap').slideDown();
}
} else {
$('#header-wrap').slideDown();
}
previousScroll = currentScroll;
});

Have you tried animate? but replace the -60px with the height of the navbar. But negative.
$(window).scroll(function() {
var currentScroll = $(this).scrollTop();
console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset);
if(currentScroll > headerOrgOffset) {
if (currentScroll > previousScroll) {
$('#header').animate({
top: '-60px' //Change to Height of navbar
}, 250); //Mess with animate time
} else {
$('#header').animate({
top: '0px'
},250);
$('#header').addClass('fixed');
}
} else {
$('#header').removeClass('fixed');
}
previousScroll = currentScroll;
});

Whatever navbar element you use, it has to include a transition: transform 0.3s on it, and a base transform of 0.
#navbar {
position: fixed;
right: 0; left: 0; top: 0;
/* your height */
height: 40px;
/* .... */
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform .3s;
-moz-transition: -moz-transform .3s;
-o-transition: transform .3s;
transition: transform .3s;
}
#navbar.scrolled {
/* subtract your height */
-webkit-transform: translate3d(0,-40px,0);
-moz-transform: translate3d(0,-40px,0);
transform: translate3d(0,-40px,0);
}
Then your javascript needs to watch the user's scrolling:
;(function (){
var previousScroll = 0;
var navbar = document.getElementById('navbar'),
navClasses = navbar.classList; // classList doesn't work <IE10
window.addEventListener('scroll', function(e){
var currentScroll = window.scrollY;
var isDown = currentScroll > previousScroll;
if ( isDown && !navClasses.contains('scrolled') ){
// scrolling down, didn't add class yet
navClasses.add('scrolled'); // we hide the navbar
} else if ( !isDown ){
// scrolling up
navClasses.remove('scrolled'); // won't error if no class found
}
// always update position
previousScroll = currentScroll;
});
}()); //run this anonymous function immediately

Try headroom js.
Also you can edit the CSS classes and deploy the transition effect.
http://wicky.nillia.ms/headroom.js

css
#media(min-width: 1079px){
#header{
width:100%;
height:82px;
border:1px solid grey;
background-color: lightgreen;
margin:0 auto;
position:fixed;
transition-property: all;
transition-duration: 0.3s;
transition-delay: 0s;
transition-timing-function: ease-out;
}
nav{
display: flex;
justify-content: space-between;
}
nav .nav1{
list-style-type: none;
padding: 0px;
}
nav a{
text-decoration: none;
color:grey;
padding: 13px;
display: block;
color: grey;
margin-top: 15px;
}
a{
text-decoration: none !important;
}
nav a:hover{
color: red;
}
nav .nav1{
display: flex;
justify-content: flex-end;
}
.row2{
background-color: skyblue;
height:2000px;
margin-top: 82px;
}
}
html
<!DOCTYPE html>
<html>
<head>
<title>header2</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/header-larger1.css">
</head>
<body>
<!--<div id="header">-->
<nav>
<ul class="nav1" id="header">
<li>HOME</li>
<li>ABOUT</li>
<li>INFO</li>
<li>DISCOUNTS</li>
<li>BUSINESS</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
<!--</div>-->
<div class="container row2">
<h3>this is row2</h3>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/head1.js"></script>
</html>
js
function fun1()
{
var documentElem=$(document),
lastScrollTop=0;
scrollabc=80;
documentElem.on('scroll',function()
{
var currentScrollTop=$(this).scrollTop();
console.log(window.pageYOffset);
if(currentScrollTop > scrollabc)
{
if(currentScrollTop>lastScrollTop)
{
//nav.addClass('hidden');
document.getElementById("header").style.marginTop = "-80px";
console.log("first if block");
}
else
{
// nav.removeClass('hidden');
document.getElementById("header").style.marginTop = "0px";
console.log("2nd if block");
}
}
lastScrollTop=currentScrollTop;
})
}
fun1();

I found a similar and simpler implementation of #Dom Day written about by Saijo George.
NOTE: I renamed Saijo's variables so it would be easier for me to read.
CSS
/* This class will be attached to your nav by the below */
.scrollUp {
transform: translateY(-100%);
}
jQuery
const navbar = document.querySelector("nav"); //Select your nav element here
let previousScroll = 0;
$(window).scroll(function handleNav() {
let currentScroll = $(window).scrollTop(); //Distance scrolled down the page
let navHeight = $(navbar).height(); //Height of navbar
//When scrolling down AND you've scrolled past navHeight * 2.25, add .scrollUp
if (currentScroll > previousScroll && currentScroll > navHeight * 2.25) {
$(navbar).addClass("scrollUp");
//When scrolling up AND you've scrolled less than navHeight, remove .scrollUp
} else if (previousScroll > currentScroll && !(currentScroll <= navHeight)) {
$(navbar).removeClass("scrollUp");
}
previousScroll = currentScroll;
});

Related

How to fix my header getting cut off on mobile browsers?

I need help with fixing my header I can not find the problem! At the beginning it looks fine but when you scroll down it cuts part of it off. But when you scroll back up it goes normal. I think it is with the hamburger menu because when you click on it, it increases the cut off. Here is the link to the website. https://perfectparadox8400.000webhostapp.com/ and here is a gif of what happens!
Link to the picture of what happens!
I only happens when you are on a phone. I used the inspector tools to test it and I did try it on a phone to.
Here is the header code.
<header id="headerrr" class="fixed-top lode">
<div class="container">
<div id="lode" class="logo float-center">
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <h1 class="text-light"><span>NewBiz</span></h1> -->
<a href="#intro">
<img id="headerr" class="bigg" src="img/l.png" heigth="100%"><div id="lod" class="lod" style=display:inline-block;vertical-align:center> Perfect Paradox's 8400</div></a>
<div id="dlod" class="loder">
<div class="fixx">
<div class="float-center lodbar">Loding...
<div id="barr" class="persent"> </div>
</div>
</div>
</div>
</div>
<script>
var w = 5;
var foo = setInterval(function () {
if(w>109) {cancelInterval(foo)}
w = w + 6.25;
document.getElementById('barr').style.width = w + '%';
}, 1000);
</script>
<nav id="lood" class="lod main-nav float-right d-none d-lg-block header">
<ul>
<li class="drop-down"><a>Home</a>
<ul>
<li>About Us</li>
<li>Portfolio</li>
<li>Team</li>
</ul>
</li>
<li class="drop-down" ><a>FTC</a>
<ul>
<li>FTC Page</li>
<li>
FTC At Home
</li>
<li>About FTC</li>
</ul>
</li>
<li>FLL</li>
<li>Junior FLL</li>
<li class="drop-down"><a>More</a>
<ul>
<li>Old Website
</li>
<li>FLL</li>
<li>Junior FLL</li>
<li>More</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav><!-- .main-nav -->
</div>
</header><!-- #header -->
The css.
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.lode {
height: 100% !important;
transition: all 0.5s;
}
.lod {
display: none !important;
transition: all 0.5s;
}
.bigg {
margin-left: 25% !important;
margin-right: 25% !important;
width: 50% !important;
-webkit-animation-name: rotate;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
transition: all 0.5s;
}
.float-center {
margin-top: 8% !important;
transition: all 0.5s;
}
.loder {
width: 80%;
transition: all 0.5s;
}
.fixx {
position: relative;
}
.lodbar {
width: 125%;
transition: all 0.5s;
background-color: #afb0b3;
height: 0.5%;
}
.persent {
width: 0%;
transition: all 0.5s;
background-color: #5e068a;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#headerrr {
height: 80px;
transition: all 0.5s;
z-index: 997;
transition: all 0.5s;
padding: 0px 0;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.3);
transition: all 0.5s;
}
.header {
height: 80px;
transition: all 0.5s;
z-index: 997;
padding: 20px 0;
background: transparent !important;
}
#headerrr.header-scrolledd {
height: 60px;
transition: all 0.5s;
}
#headerr.header-scrolleddd {
width: 76px;
transition: all 0.5s;
}
#headerr {
width: 100px;
transition: all 0.5s;
}
.header.header-scrolled,
.header.header-pages {
height: 60px;
padding: 10px 0;
transition: all 0.5s;
}
#headerrr .logo h1 {
font-size: 36px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
transition: all 0.5s;
}
#headerrr .logo h1 a {
margin: 7px 0;
transition: all 0.5s;
}
#headerrr .logo h1 a:hover {
color: #5e068a;
text-decoration: none;
transition: all 0.5s;
}
#headerrr .logo img{
padding: 0;
margin: 0px 0;
height: 100%;
transition: all 0.5s;
}
The javascript.
(function ($) {
"use strict";
// Preloader (if the #preloader div exists)
$(window).on('load', function () {
if ($('#preloader').length) {
$('#preloader').delay(100).fadeOut('slow', function () {
$(this).remove();
});
}
});
// Back to top button
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.back-to-top').fadeIn('slow');
} else {
$('.back-to-top').fadeOut('slow');
}
});
$('.back-to-top').click(function(){
$('html, body').animate({scrollTop : 0},1500, 'easeInOutExpo');
return false;
});
// Initiate the wowjs animation library
new WOW().init();
// Header scroll class
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.header').addClass('header-scrolled');
$('#headerrr').addClass('header-scrolledd');
$('#headerr').addClass('header-scrolleddd');
} else {
$('.header').removeClass('header-scrolled');
$('#headerrr').removeClass('header-scrolledd');
$('#headerr').removeClass('header-scrolleddd');
}
});
if ($(window).scrollTop() > 100) {
$('.header').addClass('header-scrolled');
$('#headerrr').addClass('header-scrolledd');
$('#headerr').addClass('header-scrolleddd');
}
// Smooth scroll for the navigation and links with .scrollto classes
$('.main-nav a, .mobile-nav a, .scrollto').on('click', function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
if (target.length) {
var top_space = 0;
if ($('#headerrr').length) {
top_space = $('#headerrr').outerHeight();
if (! $('#headerrr').hasClass('header-scrolledd')) {
top_space = top_space - 0;
}
}
$('html, body').animate({
scrollTop: target.offset().top - top_space
}, 1500, 'easeInOutExpo');
if ($(this).parents('.main-nav, .mobile-nav').length) {
$('.main-nav .active, .mobile-nav .active').removeClass('active');
$(this).closest('li').addClass('active');
}
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('fa-times fa-bars');
$('.mobile-nav-overly').fadeOut();
}
return false;
}
}
});
// Navigation active state on scroll
var nav_sections = $('section');
var main_nav = $('.main-nav, .mobile-nav');
var main_nav_height = $('#headerrr').outerHeight();
$(window).on('scroll', function () {
var cur_pos = $(this).scrollTop();
nav_sections.each(function() {
var top = $(this).offset().top - main_nav_height,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
main_nav.find('li').removeClass('active');
main_nav.find('a[href="#'+$(this).attr('id')+'"]').parent('li').addClass('active');
}
});
});
// jQuery counterUp (used in Whu Us section)
$('[data-toggle="counter-up"]').counterUp({
delay: 10,
time: 1000
});
// Porfolio isotope and filter
$(window).on('load', function () {
var portfolioIsotope = $('.portfolio-container').isotope({
itemSelector: '.portfolio-item'
});
$('#portfolio-flters li').on( 'click', function() {
$("#portfolio-flters li").removeClass('filter-active');
$(this).addClass('filter-active');
portfolioIsotope.isotope({ filter: $(this).data('filter') });
});
});
// Testimonials carousel (uses the Owl Carousel library)
$(".testimonials-carousel").owlCarousel({
autoplay: true,
dots: true,
loop: true,
items: 1,
delay: 100
});
})(jQuery);
These are the parts with the header involved!
Please help!
I tried removing the javascript but it did not help!
You adding the on scroll shrink effect to the header
There is two ways to solve this
removing header-scrolled css or change the height of header-scrolled to according to main height mentioned in headerrr css
#headerrr.header-scrolledd {
height: 60px;
transition: all 0.5s;
}
The main height of the header is 80px you adding the header-scrolledcss onscroll in javascript the header-scrolled height of is 66px so when you scroll down the screen get shrink so change the height of header-scrolled to 80px to avoid shrink
second way is to remove the javascript for header
// Header scroll class
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.header').addClass('header-scrolled');
$('#headerrr').addClass('header-scrolledd');
$('#headerr').addClass('header-scrolleddd');
} else {
$('.header').removeClass('header-scrolled');
$('#headerrr').removeClass('header-scrolledd');
$('#headerr').removeClass('header-scrolleddd');
}
});
if ($(window).scrollTop() > 100) {
$('.header').addClass('header-scrolled');
$('#headerrr').addClass('header-scrolledd');
$('#headerr').addClass('header-scrolleddd');
}
remove this code block it will remove the onscroll function for header removig this will leads to your header will not shrink on scroll
you can choose any one way
my suggestion to remove both header-scrolled and javascript code
I added this: html, body {width: auto!important; overflow-x: hidden!important} and it fixed the problem.

Create hide button for navbar

I've created this collapsable navbar that works nicely,
everytime scrolldown navbar show and everytime scrolltop navbar hide
I would like with show up navbar hide bottom is visible to users can hide navbar .
show/hide button should be scrollUP with navbar and everytime navar hiden this button visible to user !
Any way to do this?
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event) {
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if (Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight) {
// Scroll Down
$('header').removeClass('nav-up').addClass('nav-down');
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-down').addClass('nav-up');
}
}
lastScrollTop = st;
}
body {
padding-top: 40px;
}
header {
background: #f5b335;
height: 40px;
position: fixed;
bottom: 0;
transition: bottom 0.2s ease-in-out;
width: 100%;
}
.nav-up {
bottom: -40px;
}
main {
background: url() repeat;
height: 2000px;
}
footer {
background: #ddd;
}
* {
color: transparent
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="nav-down">
This is your menu.
</header>
<main>
This is your body.
</main>
<footer>
This is your footer.
</footer>
Anyone know of a good way to write this?
thanks for your helps............................
Check this solution.
Edited
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event) {
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if (Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight) {
// Scroll Down
if ($('header a').hasClass('Down-Arrow')){
$('header').removeClass('nav-up').addClass('nav-down');
} else {
$('.UP-Arrow').addClass('hide-arrow');
}
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('.UP-Arrow').removeClass('hide-arrow');
$('header').removeClass('nav-down').addClass('nav-up');
}
}
lastScrollTop = st;
}
$(document).on('click','.Down-Arrow',function(){
$(this).removeClass('Down-Arrow').addClass('UP-Arrow');
$('header').removeClass('nav-down').addClass('nav-up');
});
$(document).on('click','.UP-Arrow',function(){
$(this).removeClass('UP-Arrow').addClass('Down-Arrow');
$('header').removeClass('nav-up').addClass('nav-down');
});
body {
padding-top: 40px;
}
header {
background: #f5b335;
height: 40px;
position: fixed;
bottom: 0;
transition: bottom 0.2s ease-in-out;
width: 100%;
}
header a{
color:#000;
position:absolute;
width:30px;
height:30px;
padding:5px;
background:#f5b335;
bottom:40px;
right:20px;
border-radius: 2px 2px 0 0;
text-align:center;
transition-duration:0.3s;
cursor:pointer;
}
.Down-Arrow:after{
content: "˅";
position:absolute;
top:15px;
left:15px;
}
.UP-Arrow:after{
content: "˄";
position:absolute;
top:15px;
left:15px;
}
header.nav-up .Down-Arrow{
bottom:0px;
}
.hide-arrow{
bottom: -40px;
}
.nav-up {
bottom: -40px;
}
main {
background: url() repeat;
height: 2000px;
}
footer {
background: #ddd;
}
* {
color: transparent
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="nav-down">
This is your menu.
<a class="Down-Arrow"></a>
</header>
<main>
This is your body.
</main>
<footer>
This is your footer.
</footer>
You can do it like this. I deleted the CSS color: transparent for you to see. All you need is setting navbar's display none to '';
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event) {
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if (Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight) {
// Scroll Down
$('header').removeClass('nav-up');
$('div').removeClass('nav-up');
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('header').addClass('nav-up');
$('div').addClass('nav-up');
}
}
lastScrollTop = st;
}
$("div").click(function(){
$('header').slideToggle('fast', function() {
$("div").css("bottom", $("div").css("bottom") === '30px' ? '10px' : '30px');
});
});
body {
padding-top: 40px;
}
header {
background: #f5b335;
height: 40px;
position: fixed;
bottom: 0;
transition: bottom 0.2s ease-in-out;
width: 100%;
}
.nav-up {
bottom: -40px !important;
}
main {
height: 2000px;
}
footer {
background: #ddd;
}
div {
position: fixed;
bottom:30px;
right: 5px;
background:#f5b335;
border: 2px solid #f5b335;
border-radius: 5px;
outline: 0;
transition: bottom 0.2s ease-in-out;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="nav-down">
This is your menu.
</header>
<div> Show Navbar </div>
<main>
This is your body.
</main>
<footer>
This is your footer.
</footer>

How to animate addClass/removeclass in JQuery

I am trying to do menu. When user scroll down menu disppears, when scroll up it appears again. I have problem with adding animation effect. I do not want the menu disappearing immediately, but it will take some time. I tried with animate function but it wouldn't work.
Thanks.
<body>
<nav class="site-navbar">
</nav>
</body>
body {
height:300vh;
width:100%;
background-color:yellow;
margin:0;
padding:0;
.site-navbar {
width:100%;
height:40px;
background-color:red;
position:fixed;
top:0px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease
}
.nav-up {
top:-40px;
}
}
var prevScroll = 0;
$(document).scroll(function() {
var currentPos = $(this).scrollTop();
if(currentPos > prevScroll) {
$('nav').removeClass('site-navbar').addClass('nav-up');
}
else {
$('nav').removeClass('nav-up').addClass('site-navbar');
}
prevScroll = currentPos;
})
https://jsfiddle.net/m6r8z8wp/2/
there's no need to remove class before adding a new one FIDDLE
var prevScroll = 0;
$(document).scroll(function() {
var currentPos = $(this).scrollTop();
if(currentPos > prevScroll) {
$('nav').addClass('nav-up');
} else {
$('nav').removeClass('nav-up').addClass('site-navbar');
}
prevScroll = currentPos;
});
If you remove the class you remove the transition as well
DEMO
var prevScroll = 0;
$(document).scroll(function() {
var currentPos = $(this).scrollTop();
if (currentPos > prevScroll) {
$('nav').slideUp("slow", "linear");
} else {
$('nav').slideDown("slow", "linear");
}
prevScroll = currentPos;
})
body {
height: 300vh;
width: 100%;
background-color: yellow;
margin: 0;
padding: 0;
}
.site-navbar {
width: 100%;
height: 40px;
background-color: red;
position: fixed;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="site-navbar">
</nav>
Alternative you can use jquery slideUp() / slideDown() for animation

changing menu background-color when at top of screen

I have a menu which animates into view (from the top) when user scrolls up. And animates up (off screen) when user scrolls down. However, I want the background of the navigation to be black when user is at the top of the page, and white after they are a certain distance from the top.
html-snippet (working code)
...
function hasScrolled() {
if($( window ).width() > 768) {
var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop && st > navbarHeight ) {
// Scroll Down
$('#s-nav').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('#s-nav').removeClass('nav-up').addClass('nav-down');
}
}
} else {
$('#s-nav').removeClass('nav-up').addClass('nav-down');
}
html
<nav id="s-nav" class="row nav-down">
... nav menu ...
</nav>
css
#s-nav {
position: fixed;
z-index: 999;
background-color: #fff;
top: 0; left: 0;
width: 100%;
transition: top 0.5s ease;
}
#s-nav.nav-up { top: -75px; }
Something like this.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
$("#s-nav").addClass('white_bg');
} else $("#s-nav").removeClass('white_bg');
});
body {
background: #f1f1f1;
height: 1000px;
}
.nav-down {
height: 30px;
width: 100%;
border: 1px solid #ddd;
position: fixed;
background: #000;
color: #ff0;
}
.white_bg{
background: #000;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="s-nav" class="row nav-down">
... nav menu ...
</nav>

Flicker in nav bar styling when scrolling

I'm having a flickering issue with my bottom-border (nav link) when I scroll within a certain section. I suppose it's not really a flicker, but a transition that's being resetted every time I scroll within that section. For example (refer to source below), if my window is currently in a section and I scroll little by little, the border-bottom of my active nav link will flicker. In addition, if I hold onto the scroll bar and scroll down, the border-bottom disappears.
I'd like for it to:
1) Not flicker when scrolling.
2) When scrolling on the page with the scroll bar, keep the border-bottom present.
http://jsfiddle.net/binhxn89/zzmbex55/16/
HTML:
<body>
<div class="navbar">
<div class="container cf">
<ul>
<li>Home</li>
<li>Link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</div>
</div>
<section id="welcome" class="welcome"></section>
<section id="link1" class="link1"></section>
<section id="link2" class="link2"></section>
<section id="link3" class="link3"></section>
<section id="link4" class="link4"></section>
</body>
CSS:
body, html {
height: 100%;
color: #f3f3f3;
font-family: Arial, sans-serif;
}
body {
margin: 0;
overflow-x: hidden;
}
.container {
width: 90%;
margin: 0 auto;
}
.navbar {
background: rgba(0,0,0, 0.9);
width: 100%;
position: fixed;
z-index: 20;
}
.navbar ul li {
list-style: none;
float: left;
}
.navbar ul li a {
color: #fff;
display: block;
font-size: 14px;
margin: 0 10px;
padding: 20px 5px;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.navbar ul li a:hover,
.navbar ul li a.active {
margin-top: -3px;
font-weight: bold;
padding-bottom: 8px;
border-bottom: 2px solid #fff;
}
section {
height:100%;
z-index: 10;
position: relative;
}
.welcome {
background: #ebebeb;
}
.link1 {
background: #aaa;
}
.link2 {
background: #bbb;
}
.link3 {
background: #ccc;
}
.link4 {
background: #ddd;
}
JS:
$(document).ready(function() {
$(window).scroll(function () {
var y = $(this).scrollTop();
$('.link').each(function (event) {
if (y >= $($(this).attr('href')).offset().top - 10) {
$('.link').not(this).removeClass('active');
$(this).addClass('active');
}
});
});
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 600);
return false;
}
}
});
})
If anyone could help or refer me to a particular source regarding this issue, that would be great. Thanks!
Please take a look here or take a look at the code below. First, I calculate the heigh of one element and get his position. After that I compare the part to the current position. So far, no flickering on Safari or Chrome, I hope this will fix it. It seams that your solution raised multiple events, if you look at the console.log(y); you will notice a lot of double values for part 2, 3, 4 and 5.
$(window).scroll(function() {
var y = $(this).scrollTop();
var sectionHeigth = $('section').height();
var part = Math.round((y / sectionHeigth));
$('.link').each(function(event) {
var position = $($(this).attr('href')).offset().top;
if ((part * sectionHeigth) != position) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
});
Here is the update to your comment. I'll check if the current position is between the start and start + height position. That's all.
$(window).scroll(function() {
var y = $(this).scrollTop();
$('.link').each(function(event) {
var position = $($(this).attr('href')).offset().top;
var a = $($(this).attr('href')).height();
if (y >= position && y <= position + a) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});

Categories