We Keep Coding

Sticky sidebar with sticky navbar

I am trying to make a layout that has the following desired behaviour:
The red bar indicates where I want the sidebar to "stick". Currently I have a header and when the page scrolls the nav bar below it sticks to the top of the page. Then the header and the sidebar continue scrolling. When the sidebar is at the end of the length it sticks at the bottom. Then when the main content (consisting of individual posts) is at the end the footer comes and "pushes" the bottom of the sidebar up.
Then when scrolling back up, the same happens in reverse (preferably with the sidebar scrolling up until the top of it is in view and then sticks to the top below the navbar).
Currently I have almost all of the desired behaviour by using the sticky-kit plugin, but I can't make it so that the sidebar sticks to just below the navbar instead of the top.
A link can be found here if needed.
Current jQuery:
$(document).ready(function(){
$('nav').clone().addClass('scroll').prependTo('#wrapper');
$("#aside").stick_in_parent();
});
var nav = $("nav");
var pos = nav.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
$('nav.scroll').fadeIn(0);
} else {
$('nav.scroll').fadeOut(0);
}
});
Markup
<div id="wrapper">
<header></header>
<nav></nav>
<div id="aside"></div>
<div id="posts"></div>
</div>

Solved the problem by using the plugin's offset_top option. It didn't work initially when I had $("#aside, #posts").stick_in_parent(); but when I changed it to $("#aside").stick_in_parent(); it worked.

Have navbar slide down at a specific point on a page?

Hey everyone I've been learning js and HTML and I've been trying hard to learn alot.
I have a navbar that I want to trigger at a certain part of my page (via scrolling). Right now the code I have forces the navbar to keep fading in and out in an endless loop.
Here's my Javascript:
$('.navbarclass').hide(0);
$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 150;
if(y_scroll_pos > scroll_pos_test) {
$('.navbarclass').slideToggle();
}
});
Basically I want the navbar to trigger at 150 (which it does) but it keeps looping the toggle in and out.

It is looping in the toggle because the condition will be always true after you have scrolled the 150px. Hence, each scroll greater than 150px will make the navbar slideDown or slideUp.
I would do the conditional in this way.
if (y_scroll_pos > scroll_pos_test) {
$('.navbarclass').slideDown();
} else {
$('.navbarclass').slideUp();
}
This will slideDown the navbar when the scroll is greater than 150px and will slideUp when is less or equal than 150px.
If you just want it to be shown when the scroll is greater than 150px and do nothing else, just delete the else block.

Change .slideToggle() to .slideDown()

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.

Hide only one element in fixed div when scrolling down

I have this big photo which takes 100%x100% of screen size and above it there is fixed slider.
I want to fadeout (hide) this green logo when you scroll down from this big header photo leaving navigation bar without it.
How can I do that?
http://i.stack.imgur.com/BiUfE.jpg here is photo

If you want the logo to scroll with the page, just put it outside of the menu bar in your HTML and use position absolute (JS Fiddle).
If you want it to fade out once it leaves the slider, you can use jQuery, here is an example:
//Some variables, to avoid calculating these values at every scroll
var logo = $('#logo');
var sliderBottom = $('#slider').offset().top + $('#slider').height() - logo.height();
//On every scroll
$(window).scroll(function(){
// if we're past the slider and the logo is still visible
if($(window).scrollTop()>sliderBottom && logo.is(':visible')){
logo.stop().fadeOut(300);
}
// if not
else if($(window).scrollTop()<sliderBottom && logo.is(':hidden')){
logo.stop().fadeIn(300);
}
});
JS Fiddle Demo

Parallax scroll, animation WITH scroll instead of activate on scroll

I am diving into 'Parallax scroll' styled web pages, I can style all my main sections correctly with background image animations however when I break it down further into individual div animations I am getting stuck.
Example: Once the browser scroll hits 900px it activates a div to animate in from the left. It slides all the way into place. What I am trying to accomplish is that the animation is controlled by the user scroll completely (only animates on scroll). Hope this makes sense
Fiddle: http://jsfiddle.net/WW8xF/
HTML
<section id="one"></section>
<section id="two">
<div class="contentBox">I am a box</div>
</section>
jQuery
$(window).scroll(function(){
if($(window).scrollTop()<500) {
$('.contentBox').stop().animate({ left: -500 }, { duration: 500 });
} else {
$('.contentBox').stop().animate({ left: 100 }, { duration: 500 });
}
});

In this case you don't want to use animate, you want to control the position of your element yourself based on the scroll position of the window. Something like this:
http://jsfiddle.net/WW8xF/1/
$(window).scroll(function(){
var position = Math.min($(window).scrollTop()-700, 100)
$('.contentBox').css({ left: position });
});
You can adjust the logic of position here to affect when it moves, where it stops, etc.