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>
Related
so I want to combine these two questions:
Navbar scroll down disappear, scroll up reappear w/ slide
Bootstrap 4 - How to make fixed-top navbar disappear on scroll
I understood how to make it disappear on scroll on the height I want but I couldn't figure out how to make it reappear when the user scrolls up a little bit.
Please follow the example as I mentioned for the "navbar reappear on scroll to top"
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 scroll more than delta
if (Math.abs(lastScrollTop - st) <= delta)
return;
// If scrolled down and past the navbar, add class .nav-up.
if (st > lastScrollTop && st > navbarHeight) {
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
// Hide header 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 scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If scrolled down and past the navbar, add class .nav-up.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
body {
background: #eee;
padding-top: 40px;
margin: 0;
}
header {
background: #ddd;
height: 50px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
text-align: center;
}
header li {
list-style: none;
display: inline-block;
}
header a {
color: #222;
text-decoration: none;
padding: 0 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
.nav-up {
top: -50px;
}
main {
height: 2000px;
}
footer {
background: #ddd;
height: 45px;
line-height: 45px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="nav-down">
<ul>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</header>
<main>
</main>
<footer>
Footer
</footer>
I have a fixed header that is not visible on scroll down but is visible on scroll up, the problem is that when I reach the top of the page on iPhone, the header disappears (probably because the screen thinks I'm scrolling down even though I'm not)
I've tried this solution: Disable Chrome's pull-to-refresh on iPhone And it doesn't work when I run the function on element body, or element html, on ready. The site just loads and loads with a spinner if I do that. Should I run the function somewhere else or on a different element? It feels like it has to be run at ready? And on body or html since those are the elements I want to prevent from rubberbanding. Also see my code for the scrolling function and some CSS, is there anything I can do with that to help the header not from disappearing at the top?
menuOnScroll: function () {
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
var subMenus = $('.extended-navigation.show').attr('id');
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop){
// Scroll Down
$('#topbar').removeClass('nav-up').addClass('scroll-top-bar');
$('.main-menu-container, #search-extended, .index-info-mobile').addClass('sticky nav-hide').removeClass('nav-show');
if ((window).matchMedia("(min-width: 767.98px)").matches) {
$('.hamburgermenu-button').addClass('collapsed');
$('.main-navigation').addClass('d-xs-none');
$('.main-menu a[href="#'+subMenus+'"]').click();
}
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('#topbar').removeClass('scroll-top-bar').addClass('nav-up');
$('.main-menu-container, #search-extended, .index-info-mobile').removeClass('nav-hide').addClass('nav-show');
if ((window).matchMedia("(min-width: 767.98px)").matches) {
$('.main-navigation').addClass('d-xs-none');
$('.hamburgermenu-button').addClass('collapsed');
$('.main-menu a[href="#'+subMenus+'"]').click();
}
}
}
if($(window).scrollTop() < delta){
$('.main-menu-container, .index-info-mobile').removeClass('sticky');
}if($(window).scrollTop() > delta) {
$('.main-menu a[href="#'+subMenus+'"]').click();
}
lastScrollTop = st;
}
}
some CSS:
.sticky {
z-index: 9998;
position: fixed;
top: 0;
width: 100%;
transition: top 0.3s;
margin-top:0px;
&.nav-hide {
top: 0px;
transition: top 0.3s;
}
&.nav-show {
top: 70px;
transition: top 0.3s;
}
}
#topbar {
height: 70px;
width: 100%;
background-color: $dark-blue;
position: fixed;
top: 0;
transition: top 0.3s;
z-index: 9999;
align-items: center;
&.scroll-top-bar {
top: -70px;
}
}
I've got a sticky header that disappears when scrolling down and reappears while scrolling back up.
This is the code
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('#main-header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
if (scroll >= 500) {
$("#main-header").addClass("nav-shadow");
} else {
$("#main-header").removeClass("nav-shadow");
}
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If scrolled down and past the navbar, add class .nav-up.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('#main-header').removeClass('nav-down').addClass('nav-up');
$('#main-header').removeClass('nav-shadow');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('#main-header').removeClass('nav-up').addClass('nav-down');
$('#main-header').addClass('nav-shadow');
}
}
lastScrollTop = st;
}
#main-header {
height:120px;
position:fixed;
top:0;
width:100%;
transition: top 0.2s ease-in-out;
background: red;
z-index: 50000;
}
body {
color: $grey-color;
padding-top: 120px;
}
.nav-up {
top: -120px !important;
}
.nav-shadow {
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
}
#page-content {
height: 200vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-down" id="main-header">
<p>header</p>
</div>
<div id="page-content"></div>
I've also added a class for a box shadow on scroll. However, I need to remove the box shadow class once the header is back at the very top of the page. Anybody know how to achieve this?
Change if (scroll >= 500) to if ($(window).scrollTop() >= 500). And you don't need to set interval just call your function onscroll
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('#main-header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
if ($(window).scrollTop() >= 500) {
$("#main-header").addClass("nav-shadow");
} else {
$("#main-header").removeClass("nav-shadow");
}
hasScrolled();
});
/*
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
*/
function hasScrolled() {
var st = $(this).scrollTop();
// Make scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If scrolled down and past the navbar, add class .nav-up.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('#main-header').removeClass('nav-down').addClass('nav-up');
$('#main-header').removeClass('nav-shadow');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('#main-header').removeClass('nav-up').addClass('nav-down');
$('#main-header').addClass('nav-shadow');
}
}
lastScrollTop = st;
}
#main-header {
height:120px;
position:fixed;
top:0;
width:100%;
transition: top 0.2s ease-in-out;
background: red;
z-index: 50000;
}
body {
color: $grey-color;
padding-top: 120px;
}
.nav-up {
top: -120px !important;
}
.nav-shadow {
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
}
#page-content {
height: 200vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-down" id="main-header">
<p>header</p>
</div>
<div id="page-content"></div>
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>
I'm fairly new to JQuery and I am trying to build a navigation that hides when scrolling down and reappears with a black background when scrolling up.
I have achieved this so far, but now I want the background color of my navigation to change from black back to transparent when scrolling back to the very top of the page.
Here is my progress - http://dwaynecrawford.com/testblog/
I want to achieve an effect identical to this navigation - http://www.undsgn.com/uncode/when-you-are-alone/
Here is my code:
/* Hide Navbar */
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 1;
var delta = 5;
var navbarHeight = $('nav').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
$('nav').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('nav').removeClass('nav-up').addClass('nav-down, nav-blk');
}
}
lastScrollTop = st;
}
body{
background-color: #ababab;
}
nav {
width: 100%;
margin: 0 auto;
/*text-align: center;
display: inline;*/
display: table;
vertical-align: middle;
text-align: center;
position: fixed;
height: auto;
opacity: 1.8;
word-spacing: 20px;
/*border-bottom: #5c5c5c solid 1px;*/
height: 5vh;
}
nav a {
text-decoration: none;
color: #fff;
}
nav a:hover {
color: #9f9f9f;
font-weight: 700;
}
nav a:visited {
color: #fff;
}
.nav {
position: fixed;
top: 0px;
color: #fff;
padding-top: 15px;
padding-bottom: 0px;
text-transform: uppercase;
font-size: .75em;
transition: top 0.2s ease-in-out;
z-index: 1;
}
.nav-up {
top: -10vh;
}
.nav-blk {
background-color: #000;
opacity: .7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav hideme nav-down">
<article class="navlogo">Navigation</article>
<article class="navigation">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Work
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</article>
</nav>
Try this:
$(document).ready(function () {
$(window).scroll(function () {
if($(window).scrollTop() > 1) {
// your code
}
});
});
You're thinking it the wrong way.
scroll event is fired each time you actually scroll. There is no point to add a function that runs every 250ms (i.e. no need of setInterval) to check if you scrolled.
Just replace your whole js by:
$(window).scroll(function() {
var currentScroll = $(document).scrollTop(); // the current scrollTop position
var navbarHeight = $('nav').outerHeight();
if (currentScroll > navbarHeight) {
$('nav').removeClass('nav-down').addClass('nav-up');
} else {
$('nav').removeClass('nav-up').addClass('nav-down nav-blk');
}
});
More info about scrollTop(): check the doc
Edit to your js: add class nav-top when $(window).scrollTop() == 0, else remove the class.
function hasScrolled() {
var st = $(this).scrollTop();
if(st == 0){
$('nav:not(:nav-top)').addClass("nav-top");
}
else{
$('nav').removeClass("nav-top");
}
// 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
$('nav').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('nav').removeClass('nav-up').addClass('nav-down, nav-blk');
}
}
lastScrollTop = st;
}
Then add the class to your css (make sure it is declared after nav-blk):
.nav-top{
background-color: transparent;
opacity: 1;
}