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?
Related
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'm trying to make a sticky header with an ul and one div.
The sticky header work fine, but i want to make sticky the div too, only when the screen width are >= 981px.
Code
HTML:
<div id="sub-header-info">
<div class="wrap-perfil">
<nav class="barra-header">
<ul>
<li><a class="actividad" href="index.php">Actividad</a></li>
<li><a class="favoritos" href="#">Favoritos</a></li>
<li><a class="seguidores" href="seguidores.php">Seguidores</a></li>
<li><a class="seguidos" href="seguidos.php">Siguiendo</a></li>
</ul>
</nav>
</div>
</div>
<div class="wrap-perfil">
<div class="boton-seguir">Seguir</div>
</div>
CSS:
.boton-seguir {
float:right;
position: relative;
top: -40px;
}
.boton-fixed {
position: fixed;
top: 161;
right: 90px;
}
JavaScript:
var stickyOffset = $('#sub-header-info').offset().top;
$(window).scroll(function(){
var sticky = $('#sub-header-info'),
scroll = $(window).scrollTop();
if (scroll >= stickyOffset) sticky.addClass('fixed');
else sticky.removeClass('fixed');
});
var stickyOffset2 = $('.boton-seguir').offset().top;
var boton = $('.boton-seguir');
scroll = $(window).scrollTop();
if (screen.width >= 981 && scroll >= stickyOffset2)
boton.addClass('boton-fixed')
What I spected:
Here is a Live Demo .
What is wrong here? Can anyone help me?
Thanks in advance.
First of all, because your button is not inside of the sticky div, you're going to have to make it sticky as well. Modify your JavaScript like this:
var stickyOffset = $('#sub-header-info').offset().top;
$(window).scroll(function(){
var sticky = $('#sub-header-info'),
scroll = $(window).scrollTop(),
stickyBtn = sticky.next();
if (scroll >= stickyOffset) {
sticky.addClass('fixed');
stickyBtn.addClass('fixedBtn');
}
else {
sticky.removeClass('fixed');
stickyBtn.removeClass('fixedBtn');
}
});
Now you can catch that button with media queries like this:
#media only screen and (min-width: 981px) {
.wrap-perfil.fixedBtn {
position:fixed;
/* We need a z-index greater than #sub-header-info's */
z-index: 1000000;
/* Probably better to remove the negative-top off of the child element,
* but this hack will demonstrate how it works. :) */
top: 60px;
}
}
#media only screen and (max-width: 980px) {
.wrap-perfil.fixedBtn {
/* Add CSS for smaller screens here. */
}
}
This is a question that once asked in a different variation,
and i tried to use the code, but it doesn't work for me.
I want my footer to animate up when scrolling just a bit before reaching the bottom, and closing while scrolling up.
like in this site - you will see if you scroll all the way down.
http://www.pronto.co.il
this is my code:
css:
body, html { height: 1000px; }
html:
<button id="buttonTest">try me</button>
<div id="footer" style="display: none;"><img src="pics/try_me_1.png" ></div>
I'm trying to leave the jquery code but I don't understand exactly how it works here yet.
so this is the link to the answer - i took it and use animate() instead the alert.
Footer animates up when you reach bottom of screen, but fails to animate down when you scroll back up
will help me a lot. thank u so very much
you can add/remove a given class
var footer = document.querySelector("#footer");
window.onscroll = function(event) {
((window.innerHeight + window.scrollY) >= document.body.offsetHeight) ? footer.classList.add("visible") : footer.classList.remove("visible")
};
And here is your css
#footer{
position: fixed;
bottom: 0;
overflow: hidden;
height: 0;
transition: height .3s ease
}
#footer.visible{
height: 100px;/*what ever you want*/
}
As the comment suggest there is no animation on the link you provide, but based on the link question is just simple as this:
var isShowing = false;
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() === $(document).height()) {
$('#footer').slideToggle();
isShowing = true;
} else if (isShowing === true && $(window).scrollTop() + $(window).height() <= $(document).height() * 0.9) {
$('#footer').slideToggle();
isShowing = false;
}
});
body,
html {
height: 1000px;
}
#footer {
height: 150px;
position: fixed;
bottom: 0;
width: 100%;
left: 0;
background:black;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="buttonTest">try me</button>
<div id="footer"></div>
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();
I have a div #HangerLeft that the css.right is automatically generated via jQuery to sit on the left side of the page based on the body width. It is absolute positioned.
function hangerLeft() {
var hangerPosition = (jQuery("body").innerWidth() / 2) + (990 / 2);
jQuery("#HangerLeft").css("position","absolute").css("right", hangerPosition +"px").css("top","20px");
}
Inside the #HangerLeft div I have a #scrollWrapper div with no positioning and inside the #scrollWrapper i have a #scrollBox. The #scrollBox is absolute positioned.
#scrollWrapper { width:130px; height:400px; border:1px solid #fff;}
#scrollBox { position: absolute; top: 100; margin-top: 25px; padding-top: 0px;}
#scrollBox.fixed { position: fixed; top: 0;}
The #scrollBox sits until you scroll. Once you scroll past the top of the #scrollBox div javascript adds a class to make the #scrollBox position:fixed instead of absolute.
<script>
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#scrollBox').offset().top - parseFloat($('#scrollBox').css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
$('#scrollBox').addClass('fixed');
} else {
// otherwise remove it
$('#scrollBox').removeClass('fixed');
}
});
}
});
</script>
In Firefox and IE this works fine.
In Safari and Chrome once the #scrollBox javascript hits, the #scrollBox div jumps out of the #HangerLeft div into the middle of the page and ignores the positioning of the #HangerLeft div.
I have been battling this for 2 weeks and am at a loss.
Any help would be appreciated.
Ok, so I reworked your code. I kept it to your liking.. I would set this up in a different way but this works for your approach. You can see a live version here
JavaScript:
<script type="text/javascript">
function setupScrollBox(){
// cache box element and use wrapper as your position element
var hanger = $("#HangerLeft"),
position = $("#wrap").offset();
hanger.css({
position: 'absolute',
left: position.left - $("#scrollWrapper").outerWidth(),
marginTop: '25px'
});
}
$(document).ready(function(){
// check if IE6
var msie6 = $.browser.msie && $.browser.version < 7;
setupScrollBox();
// attach resize event to window
$(window).resize(function(){
setupScrollBox();
});
// check browser
if(!msie6){
// attach scroll event
$(window).scroll(function (event) {
// get scroll position and cache element so we only access it once
var y = $(this).scrollTop(),
wrap = $('#HangerLeft');
// if scroll position is greater than 100 adjust height else do nothing
if(y > 100)
// you can animate the position or not, your call
wrap.stop().animate({top: y}, 250);
//wrap.css('top', y+'px');
});
}
});
</script>
CSS:
#HangerLeft {
top: 100px;
}
#scrollWrapper {
width: 130px;
}
#scrollBox {
position: relative;
margin-top: 25px;
padding-top: 0px;
z-index: 10;
}
HTML:
<div id="HangerLeft">
<div id="scrollWrapper">
<div id="scrollBox">
<div id="mainContainer">
<div id="shareContainer">
<div class="moduleShareHeader">SCROLL BOX</div>
</div>
</div>
</div>
</div>
</div>