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();
Related
I am trying to add a sticky menu on my webpage. The sticky menu has to go away if I scroll down and It has to appear when I scroll up. I have gone over the internet and found some answers. But it is not working as expected. I tried 2 cases.
Case 1:
I tried below CSS and JS:
CSS:
#media (min-width: 769px) {
.main-navigation {
position: sticky;
top: 0px;
z-index: 99;
}
}
JS:
jQuery(document).ready(function( $ ){
var previousScroll = 0;
$(window).scroll(function(){
var currentScroll = $(this).scrollTop();
if (currentScroll >= previousScroll){
$('#primary-menu').addClass('menu-toggle');
} else {
$('#primary-menu').removeClass('menu-toggle');
}
previousScroll = currentScroll;
});
});
When I try the above code, it is working well but sometimes the sticky menu is flickering like a flashlight.
Then I tried the next case.
Case 2:
CSS:
#media (min-width: 769px) {
.main-navigation {
position: fixed;
top: 0px;
width:100%;
z-index: 99;
}
}
JS:
jQuery(document).ready(function( $ ){
var previousScroll = 0;
$(window).scroll(function(){
var currentScroll = $(this).scrollTop();
if (currentScroll >= previousScroll){
$('#primary-menu').addClass('menu-toggle');
} else {
$('#primary-menu').removeClass('menu-toggle');
}
previousScroll = currentScroll;
});
});
In this case, it is not flickering. But it is overlapping with the header. Please look at the image here.
Actually, the menu has to come after the header. Can anyone help me to solve this?
I've managed to get div(s) to stick at the top offset by 64px on scroll but I also want the same div's opacity to fade to 0. I can't figure out how to add this? An example of what I have done so far.
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
$(".ComponentOne").css("top",Math.max(64,800-scrollTop));
});
Updated
Try below code:
jQuery
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
var offsetTop = $('.ComponentOne').position().top;
console.log(offsetTop);
$(".ComponentOne").css("top", Math.max(64, 800 - scrollTop));
if (offsetTop === 64) {
$(".ComponentOne").css("opacity", "0");
} else {
$(".ComponentOne").css("opacity", "1");
}
});
CSS
.ComponentOne {
transition: opacity 500ms ease;
height: 100px;
background: #000;
position: fixed;
left: 0;
right: 0;
}
css
.ComponentOne{
height:100px;
width:200px;
background:pink;
position:absolute;
top:800px;
opacity:0;
}
js
$("document").ready(function(){
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
var compTop = $('.ComponentOne').offset().top;
var controllOpacity = 1400;
if(scrollTop + 100 > compTop)
{
$(".ComponentOne").css("top","64px");
$(".ComponentOne").css("position","fixed");
$(".ComponentOne").css("opacity", ((scrollTop - 800)/(controllOpacity - 800)));
}
if(scrollTop < 800){
$(".ComponentOne").css("top","800px");
$(".ComponentOne").css("position","absolute");
$(".ComponentOne").css("opacity", ((scrollTop - 800)/(controllOpacity - 800)));
}
});
});
Just adjust the value of controlOpacity variable according to you. It is used to control the range within which the div should fadeout completely. So if you lower it the div will fadeout quickly as you scoll and if you keep it large then div will fadeout slowly with scroll
JSFiddle for the example
I made a sticky navigation bar but every time I pull it down it won't stay floated to center and it looks really bad.
HTML:
<nav>
Home
About
Other
Contact
</nav>
CSS:
.fixed {
position: fixed;
top: 0;
}
JAVASCRIPT/JQUERY:
jQuery(document).ready(function() {
var navOffset = jQuery("nav").offset().top;
jQuery("nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());
jQuery(window).scroll(function() {
var scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset) {
jQuery("nav").addClass("fixed");
} else {
Query("nav").removeClass("fixed");
}
});
});
Same code in PasteBin
I would like your feedback soon please thank you!
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();
}
});
});
});
I'm using a js on my website (with wordpress) to get a stick to top menu when scrolling my page.
it works, when scrolling my header sticks on top, but there's a gap in my #entry content.
like on this example :
http://www.amsbooking.fr/mattieumoreau/artists/amine_edge_and_dance/
when scrolling and when my header sticks to top, the tittle "amine edge and dance" dissapears under the header, it is not fluid...
I guess there's a padding missing or something in my JS but I can't find why...
here is my css :
#stickyheader { width: 100%;padding-top:10px;top: 0;z-index: 1000;padding-bottom: 10px;line-height: 24px;position:relative;background-color: #f8f8f8;}
#unstickyheader {height:auto;}
and my JS :
$(function () {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#stickyheader').css({
position: 'fixed',
top: '0px'
});
$('#stickyalias').css('display', 'block');
}else{
$('#stickyheader').css({
position: 'relative'
});
}
});
});
here is jsfiddle :http://jsfiddle.net/2UCH4/
can anybody help me with this ?
thanks a lot for your help !
Since you are setting that element with position:fixed the space that was fill by the element is now available and the next container just switch up. To fix that you can correct the space with margin-top:
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#stickyheader').css({
position: 'fixed',
top: '0px'
});
$('#stickyalias').css('display', 'block');
var mT = $('#stickyheader').css('height'); /*Add this*/
$('#stickyheader').next('.post').css('marginTop', mT); /*Add this*/
}else{
$('#stickyheader').css({
position: 'relative'
});
$('#stickyheader').next('.post').css('marginTop', '0'); /*Add this*/
}
});
Check this Working Demo