We Keep Coding

Sticky navigation bar doesn't work properly

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.

How do I make a scroll to top button appear when a pre-determined part of the page appears?

I've got a scroll to top button I implemented via code that I got from one of the numerous examples out there. It works great. I changed the timing function for its appearance so that instead of appearing after 100 pixels it appears after 1340. I did this because there's some boxes on the right and I don't want the button to appear until they've been scrolled by and empty space thus appears for the button to fade in. The timing looked perfect -- the button appeared after what I figured was 1340 pixels from the top of the page.
However, I noticed that on a different (larger) screen the button didn't appear at the right time, but later. What I realized (if I gather correctly) was that the 1340 specification wasn't an absolute number of pixels from the top of the page, but was how many pixels had been scrolled through from the bottom of the browser window. For example, if I re-size the height of my browser window from, say, 1000 pixels to 400 pixels and reload the page, the button will appear 600 pixels too soon.
So my question is, is there a way to change my code so that the button appears only once a certain part of the page, measured from the top of the window, appears on screen?
Here's the javascript I'm currently using:
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1340) {
$('#scrollup').fadeIn();
} else {
$('#scrollup').fadeOut();
}
});
$('#scrollup').click(function () {
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
</script>
Thanks for any help.

Try this one--
<script type="text/javascript">
$(document).ready(function () {
ToggleScrollUp();
$(window).scroll(function () {
ToggleScrollUp();
});
$('#scrollup').click(function () {
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
function ToggleScrollUp() {
if ($(".yourbox").offset().top < $(window).scrollTop() + $(window).height()) {
$('#scrollup').fadeIn();
} else {
$('#scrollup').fadeOut();
}
}
</script>

Check out this fiddle: http://jsfiddle.net/ro39dkaL/2/
Instead of using 1340 calculate the position of the bottom of the boxes instead, you can calculate the position on the fly so it's always accurate to the situation:
$(document).ready(function () {
var elem = $('#weblinks');
var bottom = $(elem).position().top+$(elem).outerHeight(true)
$(window).scroll(function () {
if ($(this).scrollTop() > bottom) {
$('#scrollup').fadeIn();
} else {
$('#scrollup').fadeOut();
}
});
$('#scrollup').click(function () {
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});

the 1340 specified is hard coded which wont be accurate in all cases.
A better solution is to find the height of the element w.r.t the browser window.
the jquery .offset() can be used.
var offset = $("#child").offset();
var fromTop = offset.top - $(window).scrollTop();

I made this fiddle and I use another way: as you can see, I placed a div with id scroll_toggle. When the user reaches this div (obviously you can remove the text, this is just a demonstration).
This is the fiddle: http://jsfiddle.net/afilini/7633pr0r/

Get the position of the scrollbar using javascript

So I am trying to show a tooltip like box as I scroll my webpage and I would like it to follow the scrollbar along the right side of the page.
I looked around and found something to attempt to accomplish that as shown below:
function returnPercentHeight(){
var a = document.getElementById('rightPanel').scrollTop;
var b = document.getElementById('rightPanel').scrollHeight - document.getElementById('rightPanel').clientHeight;
return ((a/b) * 100);
}
I then append a % to the end and set the top margin of the tooltip to that returned value. This works pretty well (sort of) I have to adjust the return((a/b) * x) part (x) to make it follow the scrollbar based on the size of the browser window. Is there a better way to accomplish what I am trying to do? (NOTE: I can only use javascript, no JQuery please.)
EDIT:
Only the div given an ID of 'RightPanel' is scrolling, I am not using the scrollbar on the browser, but a scrollbar on an inner div.

There are three ways to do so:
First:
is to use the fixed position as following;
Position: Fixed;
Second:
With jQuery;
$(function(){
$(window).on('scroll', function() {
var scrollPOS = $(document).scrollTop();
$('.scroll').css({
top: scrollPOS
});
}).scroll();
});
Third:
Same as the previous, only animated;
$(window).on('scroll', function() {
$("#div").stop().animate({
"marginTop": ($(window).scrollTop()) + "px",
"marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
});

Although IE doesn't support, this is the coolest I've seen:
// get
var x = window.scrollX,
y = window.scrollY;
// set
window.scrollTo(1, 2);

jQuery - have popup box appear on screen regardless of how low they scroll

I'm trying to create a popup box on a list of items that goes very much to the bottom of the browser.
I want the POPUP to be in the center of the page where the user is at regardless of how low they scrolled
i have to use POSITION ABSOLUTE not FIXED
but when i use POSITION ABSOLUTE the popup always appears on top and i know its due to my top: 0
.lightbox-container{
border: solid red 1px;
width: 100px;
height: 40px;
background: yellow;
position: absolute;
top: 0;
}
I want to use something like scrollTop or one of those to get the popup to always stay in the users viewpoint regardless of how low they scrolled
$('a').on('click', function(e){
var lightBox = $('<div class="lightbox-container"> <p>click to remove</p>');
lightBox.appendTo('body');
$('.lightbox-container').on('click', function(e){
$(this).remove();
});
});
here is the fiddle im working on http://jsfiddle.net/2RNAN/1/
I know there are other posts about this but im very new to jquery and cant seem to get it working.

This works working fiddle here
$('a').on('click', function (e) {
e.preventDefault();
var lightBox = $('<div class="lightbox-container"> <p>click to remove</p>');
lightBox.appendTo('body');
$('.lightbox-container').css('top', $(document).scrollTop() + 'px');
$('.lightbox-container').on('click', function (e) {
$(this).remove();
});
});
$(document).on('scroll', function () {
$('.lightbox-container').css('top', $(document).scrollTop() + 'px');
});

Edit: I think its a bit unclean and also unnecessary to center the pop-up box via jQuery. You can easily do this with CSS. Check out my updated JsFiddle: http://jsfiddle.net/kCC8p/9/ Edit End
I set the overflow to hidden on the body and included the pop-up outside the scrollable element. This way the scroll position of the user doesn't matter anymore.
JS
var lightbox = $('.lightbox-container');
$('a').click(function(e) {
e.preventDefault();
lightbox.show();
lightbox.addClass('open');
lightbox.append('<p>Click to remove</p>');
});
lightbox.click(function(e) {
lightbox.removeClass('open');
lightbox.find('p').remove();
$(this).hide();
});
See rest on jFiddle...

I may be a little late but I think this might be closer to what you were after:
Working Example
$(function () {
var lightbox = $('.lightbox-container'),
center = function () {
var T = $(window).height() / 2 - lightbox.height() / 2 + $(window).scrollTop(),
L = $(window).width() / 2 - lightbox.width() / 2;
lightbox.css({
top: T,
left: L
}).click(function () {
$(this).hide();
});
};
$('a').click(function (e) {
e.preventDefault();
lightbox.show().text('Click to remove');
center();
});
$(window).scroll(center);
$(window).resize(center);
});
Note that this method centers the popup and keeps it centered regardless of scrolling or re-sizing.

Are you avoiding the use of position fixed due to IE9 compatibility or some other reason? Using position fixed is probably the simplest answer and then address whatever compatibility issue you're having with specific browsers, such as with this answer for IE9 regarding quirks mode.

jQuery animate() to position issue

I'm just working on my personal website, giving it a bit of a revamp.
I've implemented a sort of 'accordion' menu feature, where if a menu button is clicked, the "non-clicked" buttons disappear, and then the clicked button is moved to the top of the list, where then a panel animates down in which I will be putting text content.
In Firefox this works perfectly, however in IE and Chrome the button jumps to the top of the page and then animates to position, instead of animating from where it started from.
Anyone any ideas how to fix this?
Offending code:
function Accordion(e)
{
var o =
{
init: function()
{
o.button = e;
o.addClickHandler();
},
addClickHandler: function()
{
o.button.click(function(){
o.button.removeClass('unselected');
o.button.addClass('selected');
o.fader();
});
},
fader: function()
{
$j('.unselected').animate({opacity:0}, 1000);
var wait = setInterval(function() {
if(!$j('.unselected').is(":animated") ) {
clearInterval(wait);
o.shifter();
}
}, 100);
},
shifter: function()
{
o.button.css({'position':'absolute'});
o.button.animate({top:91}, 500, o.createInfoBox);
},
createInfoBox: function()
{
var buttonParent = o.button.parent();
buttonParent.append("<div class='infoBox'></div>");
$j('.infoBox').animate({height:390});
}
}
o.init();
return o;
}
}
The issue lies within the shifter function, where I'm setting the position to absolute and then animating so the desired effect can be achieved. I understand why it's doing this (presume it's just resetting itself to top:0 and then animating to top:91) but does anyone have a quick solution? It's late and it's doing my head in.
Much appreciated,
Dave

HAve you tried using the current position of the element when you switch it to absolute... for example:
function() {
var currentp = $(this).offset();
o.button.css({'position':'absolute', top: currentp.top});
o.button.animate({top:91}, 500, o.createInfoBox);
}
Note there are two different offset functions and im not sure which one you want use here so you might want to review the docs on that.
Also you could always just re-theme the jQuery-ui accordian and save yourself the trouble ;-)