We Keep Coding

Animating an element differently to slide in/out of view on scroll up / down

I'm working on a new portfolio for myself, using Bootstrap framework and I want to animate my slider based on the direction that the user is scrolling.
For example I already have an animation to slide the navbar class in. But as the user scrolls down the page I want to hide the navbar this is to give the user more visibility on the screen when browsing content. Then when they attempt to scroll back up the page I want to slide the .navbar class back in again.
Now I can easily get this to work if I target a specific element or pixel height, but that doesn't help me. I know it's achievable as I've seen it on several websites (LinkedIn for example).
So I'm wondering if it's a case of targeting positive or negative values on the y axis or something?

var lastScrollPosition = 0;
window.onscroll = function() {
var newScrollPosition = window.scrollY;
if (newScrollPosition < lastScrollPosition){
//upward - code here
}else{
//downward - code here
}
lastScrollPosition = newScrollPosition;
}

Sticky sidebar is jolty if its shorter than the window height?

I have a sticky sidebar that when you scroll becomes fixed when the bottom of the sidebar is in view.
If the sidebar exceeds the length of the page as it does in this demo all works fine when you scroll and is exactly what you would expect.
However if the sidebar is shorter than the window height as in this demo, it seems to be jumping when you scroll and I can't work out how to get it to stop jumping and to be smooth. In other words it should only be fixed when the base of the sidebar hits the base of the window.
I'm not great with jQuery so any help would be greatly appreciated.
$(function () {
if ($('.leftsidebar').offset()!=null) {
var top = $('.leftsidebar').offset().top - parseFloat($('.leftsidebar').css('margin-top').replace(/auto/, 0));
var height = $('.leftsidebar').height();
var winHeight = $(window).height();
var footerTop = $('#footer').offset().top - parseFloat($('#footer').css('margin-top').replace(/auto/, 0));
var gap = 7;
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y+winHeight >= top+ height+gap && y+winHeight<=footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', winHeight-height-gap +'px');
}
else if (y+winHeight>footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', footerTop-height-y-gap + 'px');
}
else {
// otherwise remove it
$('.leftsidebar').removeClass('leftsidebarfixed').css('top', '0px');
}
});
}
});
Is it possible to combine the two instances? So if its shorter stay relative till the sidebar reaches the bottom, then act as it is now if the sidebar is longer?

The code works just as intended. This is actually a conceptual problem.
Picture how it would work first. The way you described it working seems to be exactly how it's working in your demo. When the sidebar is longer than the page, the scrolling page reaches the bottom of the sidebar before the leftsidebarfixed is added. That would be impossible with a shorter sidebar.
You may want to consider fixing the sidebar to the top, instead of the bottom (as most websites with sticky sidebars do) or having a taller header, so that the sidebar starts at the bottom.

how do i keep my sticker in same position without fixing it after scrolling the page?

i am trying to move a sticker when user will stop scrolling.
i have put my sticker at right top position, and i want if user has scrolled the window then it will show scrolling with the window but when user stopped scrolling, i want that sticker to be it on its real position,(right top corner).
i'm not getting any idea how to do this.
here is what i have tried so far.
$(document).ready(function() {
var sticker = $("#sticker");
var pos = sticker.position();
$(window).scroll(function(e) {
var s = $(this).scrollTop(),
d = $(document).height(),
c = $(this).height();
scrollPercent = (s / (d - c));
var position = (scrollPercent * ($(document).height() - sticker.height()));
sticker.css({
'top': position
});
});
});
Check here.
Please help.
[EDITED]
I'm really sorry about that. i didn't clearly mention my question.
I want my sticker to scroll with the body content but after stopping scrolling it should be go up/down with some sliding effect to the top right corner. and i dont want to fix sticker at scrolling time or at last. I have search around but didn't get anything use full.
May be it could be done by other way like using some sticker plugins or some tricks. So could somebody please give me some hints or any trick to do so.
Thanks.

You should use fixed positioning in css. That way the sticker will always be in the top right corner of the screen no matter what sort of scroll is going on.
For example:
<div class="sticker">Sticker</div>
.sticker {
position: fixed;
top: 0;
right: 0;
}

Similar thing from SO. jQuery scroll() detect when user stops scrolling
$(window).scroll(function() {
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
// do something
console.log("Haven't scrolled in 250ms!");
}, 250));
});

Top image collapsed into navbar after scrolling down

So I am learning bootstrap and one of the really neat effects I came across was on the website of spook-studio [1] was when you scroll past the top navbar logo, the big logo collapses into a small version of it and along with it appears the navbar.
I know how to make the navbar and then make each of the sections of navbar correspond to the page as you scroll down, but how do you go about making the nav bar appear after scrolling?
Thank you so much for any links to questions or pointers on where to go read more!
[1] http://www.spookstudio.com/

jsFiddle : http://jsfiddle.net/8My5v/
(minor update)
To achieve that you can use jquery's scroll() and scrollTop() method.
Now this is how you can do it :
in scroll for window,
Detect window scroll amount (i.e. if its 0 or more).
If window is scrolled down -> show menu
If window is scrolled to top -> hide menu
Code in demo :
$(window).scroll(function () {
if ($(window).scrollTop() == 0) {
$('.menu').fadeOut(200);
$('.welcome').animate({
height: "300px"
}, 300);
shown = false;
} else if ($(window).scrollTop() > 0 && !shown) {
$('.menu').fadeIn(200);
$('.welcome').animate({
height: "150px"
}, 300);
shown = true;
}
});

javascript floating sidebar z-index

I'm using javascript to have a sidebar stay visible as the page scrolls. the side bar only becomes fixed once the page scrolls to the top of its container. here is the code:
<script>
function moveScroller() {
var a = function() {
var b = $(window).scrollTop();
var d = $("#featured-scroller-anchor").offset({scroll:false}).top;
var c=$("#featured-scroller-content");
if (b>d) {
c.css({position:"fixed",top:"5px"})
} else {
if (b<=d) {
c.css({position:"relative",top:""})
}
}
};
$(window).scroll(a);a()
}
</script>
This works great except that I also have a footer at the bottom of the page that I want to be visible infront of the sidebar. Currently the sidebar is displayed above the footer and I can't figure out how to change that.
I have the footer with a z-index of 999 and I tried setting the z-index of #featured-scroller-content to something less but that didn't work. the only thing that will work is if I set the z-index of the sidebar to -1 but then none of the links in the sidebar work anymore.

Does the footer have position: relative?