We Keep Coding

scrollTop suddenly not working for sticky menu

I had this working with no problems for the entire build of the site. Then, the day I was supposed to launch, the sticky menu stopped working right. The menu is supposed to start at the bottom, scroll to the top, then stick (position: fixed).
Now, it scrolls about 10px and then jumps to the top. Why is the scrollTop distance not calculating correctly?
Live site at [site no longer exists]
Here's the code for the sticky menu. I'm also using JS to set min-height of divs to window height, but haven't included that code here.
$(function(){
var stickyRibbonTop = $('#wrapper-wcf53badf7ebadf7').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyRibbonTop ) {
$('#wrapper-wcf53badf7ebadf7').css({position: 'fixed', top: '0px', 'background-image':'url(http://amarshall.360zen.com/wp-content/uploads/2014/07/menu-fade-background2.png)'});
$('#block-bcf53bf14093931c').css({display: 'block'});
} else {
$('#wrapper-wcf53badf7ebadf7').css({position: 'static', top: '0px','background-image':'none'});
$('#block-bcf53bf14093931c').css({display: 'none'});
}
});
});
Thanks in advance for any help! I'm not a JS or jQuery expert yet, so any suggestions for cleaning things up would be appreciated.
NOTE: The site is built on WordPress, so no-conflict mode is in effect.

I think you are initialising the sticky menu function before you set the min-height of $('big-div').
On page load, the menu starts at 54px from the top, and so when you store the offset().top value as stickyRibbonTop, it is stored at 54px. Then on your scroll event you are comparing against this.
Try setting the min-height of the divs first in your code, then run this same script afterwards. The value of stickyRibbonTop should then be correct.
Bear in mind that you will need to reset stickyRibbonTop every time the window.height() is updated, so you should probably make this sticky menu function a named function and call it at the end of the wrapper_height function. something like this:
function stickyNav() {
var stickyRibbonTop = $('#wrapper-wcf53badf7ebadf7').offset().top;
$(window).unbind('scroll', scrollEvent);
$(window).on('scroll', stickyRibbonTop, scrollEvent);
};
function scrollEvent(event) {
var stickyRibbonTop = event.data;
if ($(window).scrollTop() > stickyRibbonTop) {
$('#wrapper-wcf53badf7ebadf7').css({ position: 'fixed', top: '0px', 'background-image': 'url(http://www.adammarshalltherapy.com/wp-content/uploads/2014/07/menu-fade-background2.png)' });
$('#block-bcf53bf14093931c').css({ display: 'block' });
}
else {
$('#wrapper-wcf53badf7ebadf7').css({ position: 'static', top: '0px', 'background-image': 'none' });
$('#block-bcf53bf14093931c').css({ display: 'none' });
}
};
function wrapper_height() {
var height = $(window).height();
var wrapperheight = height - 75;
wrapperheight = parseInt(wrapperheight) + 'px';
$(".bigDiv").css('min-height', wrapperheight);
$("#wrapper-wcf53bad125d7d9a").css('height', wrapperheight);
stickyNav();
}
$(function () {
wrapper_height();
$(window).bind('resize', wrapper_height);
});

Is there anyway to make this div come back when you scroll to top again

So i got this div animate out of the page perfectly but whenever i scroll back up it's still out of the page i tried an if/else statement but it doesn't come back, anyone could help me with this?
Thanks in advance!
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > 300){
$('.offer').stop().animate({ top: '+= 10' }, 10, "linear");
}
else if ($(window).scrollTop() < 300){
$('.offer').stop().animate({ top: '-=10' }, 10, "linear");
}
});
});

Try this following code
$(document).ready(function(){
//Keep track of last scroll
var lastScroll = 0;
$(window).scroll(function(){
var st = $(window).scrollTop();
if (st > lastScroll){
$('.offer').stop(true).animate({ top: '+= 100px' }, 10, "linear");
}
else{
$('.offer').stop().animate({ top: '-=100px' }, 10, "linear");
}
//Updates scroll position
lastScroll = st;
});
});
Hope it helps!

The problem is that you are adding or removing 10 from the position every single time a scroll event is fired.
What you should do instead is have a flag, such as isFurtherThan300, which keeps track of whether the position is before or after your cutoff.
Then, perform the animation only if isFurtherThan300 changes.

Sidebar that does't scroll more than its contents

I have a page with long content on it. Together with that there is a sidebar which has less content and at the moment if you continue scrolling down, at some point there will be just whitespace in a sidebar.
So what I tried to do is once sidebar reaches end of its content, height give it fixed position, but while there are still things to scroll give it static position.
So I've got
$(window).scroll(function () {
var y = $(window).scrollTop();
var x = $(window).scrollTop() + $(window).height();
var s = $('#sidebar').height();
if (x > s) {
$('#sidebar').css({
'position': 'fixed',
'bottom': '0'
});
}
if (x < s) {
$('#sidebar').css({
'position': 'static'
});
}
});
This kinda works. It starts with static position, but when I scroll in any direction it changes to fixed. However I want it to remain static while there is something to scroll through (in upwards and downwards directions)
EDIT Basically it should work like this: http://jsfiddle.net/cJGVJ/12/ but without the shadow effect.

Give HTML and BODY height: 100%;
html, body{
height: 100%;
}
#sidebar{
position: absolute;
bottom: 0px;
}

Make a navigation bar retain position when scrolled

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 });
}
});

Div positioning fixed at margin-top:20px when scrolling up

I have a div which I want to become fixed at 20px from the top of the window when you scroll up and 40px from the footer when you get the bottom. My code seems inconstant, there must be a better way? Page Link
$(document).scroll(function () {
if($(window).scrollTop() >= 345){
$('#rightShipping').css({'position' : 'fixed', 'top' : '0px'});
}
if($(window).scrollTop() <= 346){
$('#rightShipping').css({'position' : '', 'top' : ''});
}
console.log($(window).scrollTop());
});

One quick idea - I would remove the .rightCol block, leaving only the #rightShipping one with top: 20px and it parent with position: relative. And then use this code:
$(document).scroll(function () {
var scrollTop = $(window).scrollTop();
var offsetTop = $('#rightShipping').offset().top;
var positionTop = $('#rightShipping').position().top;
if (scrollTop >= offsetTop - positionTop) {
$('#rightShipping').css('position', 'fixed');
} else {
$('#rightShipping').css('position' : 'relative');
}
});
I really don't know if this will work, as I haven't tested it and I need to get some sleep, but I hope it helps.
Good luck!