I want my navbar to only show after scrolling. I've done that with JS but there's a "step" when it slides up or down. Here is the JS code :
$(document).ready(function(){
// hide .navbar first
$(".navbar").hide();
// fade in .navbar
$(function () {
$(window).scroll(function(){
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 100) {
$('.navbar').slideDown(2000);
}
else {
$('.navbar').slideUp(2000);
}
});
});
});
And the JSfiddle : http://jsfiddle.net/3dcg2ygw/
How can I get it smooth ?
The problem is that the navbar has a minimum height, try this in your code:
.navbar {
height: 97px;
background-color: #fff;
overflow:hidden;
min-height:0px;
}
DEMO
I would use a fade in jQuery function
$(document).ready(function () {
// hide .navbar first
$(".navbar").hide();
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 100) {
$('.navbar').fadeIn().slideDown();
} else {
$('.navbar').fadeOut().slideUp();
}
});
});
});
Related
I have a function which is designed to automatically hide a sidebar on smaller screens. The sidebar gets hidden by adding an id which affects the sidebar margin. Transitions are used to animate it sliding left.
As I don't want the sidebar to slide off the screen on page load, I have counteracted this by adding a class to remove transitions then remove that class after 0.5s, the length of the transition.
I have the below function running on both page load and window resize. I only want the transitions to be removed on page load so is there a way to use an if statement to detect this.
function setSidebarState() {
if($(window).width() < 960) {
$(".wrapper").attr("id", "sidebarClosed");
//Page load only
if($(document).ready()) {
/***if(!$(window).resize()) - this also doesn't work***/
$(".sidebar, .content").addClass("noTransition");
setTimeout(function() {
$(".sidebar, .content").removeClass("noTransition");
}, 500);
}
}
else {
$(".wrapper").attr("id", "");
}
}
$(document).ready(function() {
setSidebarState();
});
$(window).resize(function() {
setSidebarState();
});
The css is simply
.sidebar {
width: 320px;
position: fixed;
height: 100vh;
background: #333;
}
.content {
margin-left: 320px;
}
.wrapper#sidebarClosed > .sidebar {
margin-left: -270px;
}
.wrapper#sidebarClosed > .content {
margin-left: 50px;
}
All you need to do is have a Boolean parameter you can pass to the function:
function setSidebarState(pageLoad) {
if($(window).width() < 960) {
$(".wrapper").attr("id", "sidebarClosed");
//Page load only
if(pageLoad) {
$(".sidebar, .content").addClass("noTransition");
setTimeout(function() {
$(".sidebar, .content").removeClass("noTransition");
}, 500);
}
}
else {
$(".wrapper").attr("id", "");
}
}
$(document).ready(function() {
setSidebarState(true);
});
$(window).resize(function() {
setSidebarState(false);
});
In my site i am having a list of items where i am using scroll bar to scroll the items.
Now i want to replace that bar with two buttons which working for scroll up and scroll down which can auto hide if there is not any item is available to display.
If is there any plugins are available please do let me know.
scrollTop() can help you here. See the documentation
Example:
$('.scroll-up-button').on('click', function() {
var y = $(window).scrollTop(); // current page position
$(window).scrollTop(y - 150); // scroll up 150px
});
$('.scroll-down-button').on('click', function() {
var y = $(window).scrollTop(); // current page position
$(window).scrollTop(y + 150); // scroll down 150px
});
Obviously this is not a complete solution, but could help you get started in the correct direction.
Use this fiddle
JS:
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
HTML:
Scroll To Top
CSS:
.scrollToTop{
width:100px;
height:130px;
padding:10px;
text-align:center;
background: whiteSmoke;
font-weight: bold;
color: #444;
text-decoration: none;
position:fixed;
top:75px;
right:40px;
display:none;
}
.scrollToTop:hover{
text-decoration:none;
}
this is what I have so far:
$("#main").each(function() {this.scrollTop = this.scrollHeight;
if ($(this).scrollTop()>0)
{
$('#navigation').addClass("nav-hide");
}
else
{
$('#navigation').addClass("nav-normal");
}
});
So basically, I am trying to figure out when you scroll to the top of a div it will hide the navigation bar. So you could read the div without the navigation bar over it. Any ideas? Thanks.
Here's my JSFiddle: https://jsfiddle.net/qb15p5g7/3/
You need to use jquery's window scroll function and not each function unless you are going to have more than one section that you need to hide the navigation on there is no reason to use each and I'm assuming that you don't because you are using an id for #main and Id's are supposed to be unique. Also you don't need to add more than one class you can just add the class and remove the class. So if im correct in assuming that you don't have more than one section that you need to hide the nav in multiple instances on your page then your code should look something like this:
$(window).scroll(function() {
if ($(this).scrollTop() >= $('#main').offset().top) {
$('#navigation').addClass("nav-hide");
}else {
$('#navigation').removeClass("nav-hide");
}
});
And you will just add the nav-hide class and then remove it when scrolling back up.
Here is a fiddle of this working JSFiddle Demo
I assume this is what you are looking for if not let me know so I can edit my answer.
The $(window).scroll() method executes on scroll change of the window. You can use it to hide your #navigation id selector
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('#navigation').fadeIn();
} else {
$('#navigation').fadeOut();
}
});
JSFiddle here
See the jQuery documentation for .scroll() here
function scrollpos() {
if (window.scrollY<document.getElementById('header').clientHeight) {
document.getElementById('navigation').style.display = 'block';
} else {
document.getElementById('navigation').style.display = 'none';
}
}
#navigation {
width: 100%;
height: 50px;
background-color: #586e75;
position: fixed;
z-index: 1000;
transition: transform 200ms ease;
}
header,
section {
height: 100vh;
width: 100%;
position: static;
}
header {
background: #4f4244;
}
section {
background: #222222;
}
.nav-normal {
transform: translateY(0%);
}
.nav-hide {
transform: translateY(-100%);
}
<body onscroll="scrollpos()">
<div id="navigation"></div>
<header id="header"></header>
<section id="main"></section>
</body>
do u need something like this?#Steboney
I'd like to ask if there is a way to use jQuery animate() method to animate horizontal navbar's top property on window scroll.
Here is code I use:
window.addEventListener("scroll", function() {
if (window.scrollY > 200) {
$('#navbar').css({top:"100px"});
}
else {
$('#navbar').css({top:"0px"});
}
},false);
CSS:
#navbar{
top:0;
position:fixed;
transition: top 0.5s;
}
When you scroll down 200px the navbar changes its top position from 0 to 100px;
This works fine, but if I change methods and put .animate instead of .css,
$('#navbar').animate({top:"100px"});
it stops working. Any ideas why?
You can do this with css transition and how you can achieve this is with jQuery addClass instead of css()
DEMO
$(window).on('scroll', function () {
if ($(this).scrollTop() > 200) {
if (!$('.navbar').hasClass('expand')) {
$('.navbar').addClass('expand');
}
} else {
if ($('.navbar').hasClass('expand')) {
$('.navbar').removeClass('expand');
}
}
});
.navbar {
top: 0;
position: fixed;
transition: top 0.5s;
}
.navbar.expand {
top: 100px;
}
Scroll event listener execute every time when you scroll page on every pixel, and animate starts from begin. This gives unexpected results.
http://jsfiddle.net/29tkxawy/
You should be leave as is (with .css()).
Or like this without css transition:
http://jsfiddle.net/29tkxawy/10/
I'm trying to make animated sticky navigation that slides in at the top of the page after it is scrolled down 955px, and slides back up if the page is scrolled to less than 955px.
I managed to animate the first step by setting top to 0 and margin-top to -172px in css and animating top by 172px in jquery, but I don't know how to reverse this after the page is scrolled back up.
html:
<header>
<nav>
Torte
Kolači
Napici
Slatka Peciva
Jela
Slana Peciva
O blogu
Kontakt
Ostalo
</nav>
</header>
Css:
header{
height: 125px;
left: 0;
position: fixed;
top: 0;
margin-top: -172px;
width: 100%;
z-index: 100;
}
jQuery:
/* sticky navigation, active class */
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 955) {
$('header').animate({'top':172});
$('section').each(function(i) {
if ($(this).position().top <= windscroll + 50) {
$('nav a.active').removeClass('active');
$('nav a').eq(i).addClass('active');
}
});
} else {
/*
code for the slide up animation goes here
*/
$('nav a.active').removeClass('active');
$('nav a:first').addClass('active');
}
}).scroll();
How do I reverse the animation after the page is scrolled up again?
I figured it out. It's quite simple. Just added .stop() in front of animate for slide in animation, and for slide up I used the same line of code and then set the top to 0 to reverse it.
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 955) {
$('header').stop().animate({'top':172});
$('section').each(function(i) {
if ($(this).position().top <= windscroll + 50) {
$('nav a.active').removeClass('active');
$('nav a').eq(i).addClass('active');
}
});
} else {
$('header').stop().animate({'top':0});
$('nav a.active').removeClass('active');
$('nav a:first').addClass('active');
}
}).scroll();