We Keep Coding

$(window).scroll() not working in IE 9

I have a nav bar and a side bar that is displayed on the bottom on my page when its loaded. But as you scroll down it should add certain css to change the position of them. But seems this is not working only in IE. Can anyone tell me how to fix this in IE?
This is my code:
// SCRIPT FOR STICKY SIDEBAR AND NAV
$(function() {
var stickyRibbonTop = $('#second').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyRibbonTop ) {//background: rgba(999,999,999,0.7);height: 80px;width: 100%80
$('#stickyribbon').css({position: 'fixed', top: '0px',maxHeight:'50px',width:'100%',zIndex: '123'});
$('#sidebar').css({position: 'fixed', bottom: '26%',zIndex: '13'});
} else {
$('#stickyribbon').css({position: 'static', top: '0px'});
$('#sidebar').css({position: 'absolute', bottom: '-75%'});
}
});
});
UPDATE:
as I see now, when I log the value of $(window).scrollTop() its always 0 - zero

Try $(document).scroll instead

Sticky Navigation and jQuery

Having a bit of a problem. Looking to build a sticky nav, and when the sticky nav triggers, adding the 'is-sticky' class, i'd like to add a different class to another div.
Below is the code..
Thanks
<script>
$(document).ready(function(){
if ( $(".sticky-wrapper").hasClass("is-sticky") ) {
$("#menu-item-25").css({display: "inline"});
}
});
</script>

There's a lot going on here that I'm not sure about, but:
You need an event listener that leads to code that adds/removes the classes/css that you want. What you have now is an event listener, but it's listening for the document ready state, not a scroll that triggers a sticky nav. So:
<script>
$(document).ready(function(){
//add a listener for something that would indicate a sticky-state change, presumably scrolling
$(document).on('scroll', function() {
checkForStickyNav();
});
function checkForStickyNav() {
//look for sticky nav, and prevent running over and over
if ( $(".sticky-wrapper").hasClass("is-sticky") && !$(".otherStuff").hasClass("stickyfied") {
//do your stuff here; presumably changing CSS as appropriate
//make sure to add something along the lines of 'stickyfied' above, so that you don't keep re-adding the css on every scroll event
$("#menu-item-25").css({display: "inline"});
$('.otherStuff').addClass('stickyfied');
}
</script>

To add a class you need
$("#element").addClass('myclass');
You can also remove a class with
$("#element").removeClass('myclass');
And toggle a class with
$("#element").toggleClass('myclass');
But your code is far away from a sticky nav, here is how I do it
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('nav').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top,
// otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('nav').css({ 'position': 'fixed', 'top': '0px', 'left': '0px', 'line-height': '30px' });
} else {
$('nav').css({ 'position': 'relative', 'top': '0px' });
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
Obviously you'll have to play around with the css

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

Sticky sidebar issue with Javascript

I am trying to implement a sticky sidebar that always sits at the top of the window as the user scrolls down the page.
I have it sticking to the top at the correct time, but for some reason it no longer floats left... will anybody please let me know what I can do to get it to stay in the same position when sticking?
My site is here. Thanks in advance!
<script type="text/javascript">
$(function(){ // document ready
if (!!$('.sticky').offset()) { // make sure ".sticky" element exists
var stickyTop = $('.sticky').offset().top; // returns number
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop){
$('.sticky').css( { position:'fixed', top: 0, marginLeft: "30px" } );
}
else {
$('.sticky').css('position','static');
}
});
}
});
</script>

Don't invent the wheel. Just get something like this plug-in and enjoy.

You don't seem to be telling it to be at the left side of the screen.
Try changing this line to:
$('.sticky').css( { position:'fixed', top: 0, left:0, marginLeft: "30px" }

Change Div Y Position with mouse wheel and sidebar

I need that when I scroll down or up with mouse wheel or sidebar my div change incrementally the Y position (for example 50px up or down ). I need this in Javascript/Jquery.
I Try this code, but only works for scrolling down(The Scrolling Down and Up Function is working well, only the animate part is working wrong):
UPDATE:
var sidebarScrollTop = 0;
$(document).ready(function() {
sidebarScrollTop = $("body").offset();
$(window).scroll(function ()
{
var docScrollTop = $('body,html').scrollTop();
if(docScrollTop > sidebarScrollTop.top)
{
$("#legend").stop().animate({ marginTop: "+=50px",}, 'slow', "easeOutCirc" );
}
else
{
$("#legend").stop().animate({ marginTop: "-=50px",}, 'slow', "easeOutCirc" );
}
});
});
$(window).resize(function()
{
sidebarScrollTop = $("#legend").offset().top;
});
$(document).resize(function()
{
sidebarScrollTop = $("#legend").offset().top;
});
Thanks

You can use
$(window).scroll(function() {
// Your scroll code here
});
to grab whenever the user is scrolling on the page.
Next you want to change the div's y-value.
If the div is positioned absolute, this is just changing its top-value.
$('my-div').top = original-top-value + $(window).pageYOffset;

I believe you need is to keep the div always showing even when user scrolls down. If that is the case then it can be done with only CSS:
div {
position: fixed;
z-index: 100;
top: 100px;
left: 100px;
}
The values of z-index, top and left are dummy values. Change em with your ones.
UPDATE:
Since CSS Solution won't work for you, here is a working example writter in JS: http://jsfiddle.net/qCtt5/