I have this glitch that is bothering me. The problem is that my navigation is not working properly as I wanted it to be. It jumps even though I have not reached the top of my nav or after passing the height of my header with scrollTop value. I recreate the problem in jsfiddle.
var header_height = $('header').height();
//var main_nav = $('nav');
$(document).scroll(function () {
if ($(this).scrollTop() >= header_height) {
$('nav').addClass("fixed");
} else {
$('nav').removeClass("fixed");
}
});
Instead of taking the height of header, you should be taking the top of .main_nav to compare with ScrollTop.
Change the first line in the code you posted above to:
var header_height = $('.main_nav').position().top;
That should work. Here is the working fiddle.
Hope this helped.
Related
I'm using this code to make the navigation bar stick to the top of the page after scrolling:
var nav=$('body');
var scrolled=false;
$(window).scroll(function(){
if(175<$(window).scrollTop()&&!scrolled){
nav.addClass('stuck');
$('.navigation-class').animate({marginTop:80},1000);
scrolled=true;
}
if(175>$(window).scrollTop()&&scrolled){
$('.navigation-class').animate({marginTop:0},0,function(){nav.removeClass('stuck');$('.navigation-class').removeAttr('style');});
scrolled=false;
}
});
The problem is, if the user scrolls the page up and down quickly, and the navigation is STILL animating, it will continue the animation and then suddenly jump into it's designed position, which gives a hiccup effect to the menu.
Try to scroll this page quickly to see it in live.
Is it possible to make it run smoothly like other websites?
Thanks are in order.
Edit:
After rereading the question, I realized the problem is probably that you're not cancelling the animation when the user scrolls back above 175px.
Presumably you're applying position: float to your nav element? Are you removing float as soon as the user scrolls up?
Try setting the queue option to false (see https://api.jquery.com/animate/), so the animation doesn't wait for the other one to complete.
Maybe you could try getting rid of the JQuery animation and replacing it with CSS transitions?
Maybe something like this?
var nav=$('body');
var scrolled=false;
var scrollToggle = function(){
$(window).off('scroll');
if(175<$(window).scrollTop()&&!scrolled){
nav.addClass('stuck');
$('.navigation-class').animate({marginTop:80},1000, function() {
$(window).on('scroll', scrollToggle);
);
scrolled=true;
}
else if(175>$(window).scrollTop()&&scrolled){
$('.navigation-class').animate({marginTop:0},0,function({
nav.removeClass('stuck');
$('.navigation-class').removeAttr('style');
$(window).on('scroll', scrollToggle);
});
scrolled=false;
}
};
$(window).on('scroll', scrollToggle);
I have something similar in a WIP myself. I'll post it here only slightly edited, maybe it can be useful to you.
var headerFloat = function() {
//Header
var pageHeader = $('#pageHeader'), pos = '',
headerMain = $('#headerMain'), headerMainHeight = '',
content = $('#content'), contentPadding = '',
pageTitle = $('h1.currentPage'), pageTitleTop = '';
if($(window).scrollTop() >= 95) {
pos = "fixed";
headerMainHeight = '75px';
contentPadding = '225px';
pageTitleTop = '55px';
contentHeaderTop = '130px';
}
//Header
pageHeader.css('position', pos);
headerMain.css('height', headerMainHeight);
content.css('padding-top', contentPadding);
pageTitle.css({ 'transition': 'all 0s', 'position': pos, 'top': pageTitleTop });
pageTitle[0].offsetHeight; //force "reflow" of element -- stackoverflow.com/questions/11131875/#16575811
pageTitle.css('transition', '');
};
$(document).ready(function() {
/* *** SCROLL -> FLOAT HEADER *** */
$(window).on("scroll.float", headerFloat);
});
Inputting '' (empty string) in the JQuery css function resets it to the original value. You should do that instead of .removeAttr('style');
I would also avoid the scrolled boolean. I think you need it anyway, if scrollTop < 175, you'll never be scrolled, and vice versa.
I am creating a fixed position sub-nav menu bar for a responsive site. All the examples I can find of a fixed menu that sticks to top after scrolling are based on a set number of pixels from top.
However, since I am working a responsive site the pixels from top where I need the menu to come in are different based on viewport (on small screens, the menu should appear after more area scrolled down because the content fills are taller area of screen).
I have a working example and am using the following jquery script:
$(document).ready(function(){
$('#navigation a, #fixedbar a').on('click', function(e) {
e.preventDefault();
});
$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();
if(scrolltop >= 215) {
$('#fixedbar').fadeIn(250);
}
else if(scrolltop <= 210) {
$('#fixedbar').fadeOut(250);
}
});
});
As you can see the fixed bar fades in if more than 215 pixels scrolled from the top. Instead I'd like to have it appear after scrolling past a certain div. That way I know it will come in after user has fully scrolled past the intro text.
Here's my fiddle
Any good examples out there of what I want to do? Or easy way to modify the jquery script? Thanks in advance.
This modification will make it fade in after it passes the static nav
DEMO
var $nav = $("#navigation");
if(scrolltop >= $nav.offset().top + $nav.height()) {
$('#fixedbar').fadeIn(250);
}
else {
$('#fixedbar').fadeOut(250);
}
Demo http://jsfiddle.net/EHhQE/1/
You need to fade out and fade in the navigation when the scroll reaches the bottom and the top of the navigation bar respectively.
var topOfDiv = $('#navigation').position().top;
var bottomOfDiv = $('#navigation').position().top+$('#navigation').outerHeight(true);
And fetched in your code:
$(document).ready(function(){
$('#navigation a, #fixedbar a').on('click', function(e) {
e.preventDefault();
});
$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();
var topOfDiv = $('#navigation').position().top;
var bottomOfDiv = $('#navigation').position().top+$('#navigation').outerHeight(true);
if(scrolltop >= bottomOfDiv) {
$('#fixedbar').fadeIn(250);
}
else if(scrolltop <= topOfDiv) {
$('#fixedbar').fadeOut(250);
}
});
});
$(document).ready(function ()
{
slider();
});
$(window).scroll(function ()
{
slider();
});
function slider()
{
if (document.body.scrollTop > 208)
$('#fixedMenu').fadeIn(0);
else
$('#fixedMenu').fadeOut(0);
}
Essentially what I want to do is keep my blog posts' meta information on the screen at all times. As it is, the meta info (title, author, etc.) is displayed to the left of the post content, and I have it set up where the meta information stays on screen smoothly when I scroll down. However, I'm having an issue:
I can't get it to smoothly not scroll over the #comments DIV. It either overlaps or is jumpy, depending on how I tweak the code.
Here is the JS function I'm using:
function brazenlyScroll() {
var element = jQuery(".single-post .headline_area");
var top = element.offset().top - 50;
var elementHeight = 26 + element.height();
var maxTop = jQuery("#comments").offset().top - elementHeight;
var scrollHandler = function() {
if (jQuery(document).width() > 1035) {
var scrollTop = jQuery(window).scrollTop();
if (scrollTop<top) {
element.css({position:"relative",top:""})
} else if (scrollTop>maxTop) {
element.css({position:"absolute",top:(maxTop+"px")})
} else {
element.css({position:"fixed",top:"50px"})
}
}
}
jQuery(window).scroll(scrollHandler);
jQuery(window).resize(scrollHandler);
scrollHandler();
}
That code is included via an external JS file and is called at the bottom of the page. You can see all of this in action here: http://www.rickbeckman.org/dumber-and-dumber-and-dumber/
Any help would be greatly appreciated.
You can make the comments div shrink to right by giving it a 300px padding when meta block reaches maxTop.
I just tested ur code and was able to fix the overlapping by changing 26 to a bigger number, say about 60.
var elementHeight = 26 + element.height();
Hope this helps.
I'm trying to create a sticky navigation menu that will be positioned right underneath a banner and when you scroll down and the banner cannot be seen anymore the navigation menu will be fixed at the top of the browser chrome. Here's what I have so far: http://tinyurl.com/bper44a
The CSS is straight forward, the issue may be with my JS:
$(document).ready(function() {
var s = $(".navMenu");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("fixedTop"); }
else {
s.removeClass("fixedTop");
}
});
});
While it works exactly the way on want it in Firefox, I can figure out why it behaves differently in Chrome and Safari (gets into fixed position as soon as you scroll down just a little bit).
Any insight?
Not sure why it works in firefox, but I think the following will work for all browsers:
$(document).ready(function() {
var s = $(".navMenu");
var banner = $("header > img");
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
// if the scroll position is greater than the height of the banner
// fix the navigation.
if (windowpos >= banner.outerHeight()) {
s.addClass("fixedTop"); }
else {
s.removeClass("fixedTop");
}
});
});
Obligatory fiddle here.
I know this question has been asked before, but I'm pretty sure after checking them out, that none of the navigation bars where built like this one.
I'm basically having trouble making the navigation bar "seamlessly" switch to a fixed position at the top of the screen after scrolling past its original position, then back again.
I have included the code, and an example here: http://jsfiddle.net/r2a6U/
Here is the actual function which makes the div switch to fixed position mode:
var navPos = $('#navContainer').offset().top;
$(window).scroll(function(){
var fixIT = $(this).scrollTop() >= navPos;
var setPos = fixIT ? 'fixed' : 'relative' ;
var setTop = fixIT ? '0' : '600' ;
$('#navContainer').css({position: setPos});
$('#navContainer').css({'top': setTop});
});
Any help would be much appreciated.
Cheers
You can fix your issue to remove the styles instead of setting them to relative and 600px. I suggest you add/remove a class in JavaScript which will then apply the fixed CSS though. You will end up with much nicer and cleaner JavaScript.
Also make sure you center #navContainer properly when it's fixed.
jsFiddle
CSS
#navContainer.fixIT {
position:fixed;
top:0;
/* these will ensure it is centered so it doesn't jump to the side*/
left:0;
right:0;
text-align:center;
}
JS
var navPos = $('#navContainer').offset().top;
$(window).scroll(function(){
var fixIT = $(this).scrollTop() >= navPos;
if (fixIT)
$('#navContainer').addClass('fixIT');
else
$('#navContainer').removeClass('fixIT');
});
Fix it in here: jsFiddle
Only a small script update:
var navPos = $('#navContainer').offset().top;
$(window).scroll(function(){
var navContainer = $('#navContainer');
if( $(this).scrollTop() >= navPos ) {
// make it fixed to the top
$('#navContainer').css({ 'position': 'fixed', 'top': 0 });
} else {
// restore to orignal position
$('#navContainer').css({ 'position': 'relative', 'top': 600 });
}
});