Develop Reference

How to make a sidenav fixed to an existing Sticky Header onscroll?

I already have Sticky header nav in my project, however I need to have the sidenav (filter section) or Aside also show fixed on the left when the scroll occurs as there is a long list on the right side of the page. As I mentioned the header is already in FIXED position to top. How can I make the Aside or sidenav to stick along with the header, just beneath it. I am unable to do it via CSS and not sure how can I accomplish this using jquery.
Any help would be much appreciated.
Thanks in Advance..

Can you please provide us with your code with the css?
Basically what you can do is:
Create a container to have your sidebar and center section in with
overflow hidden and width to 100%.
Set the sidebar position as relative, with a provided width and
padding to the top so that the navbar does not overlap on it.
Set your main container (the element containing the list) width
position relative, this way it will display next to the sidebar, you
can add overflow auto to make sure that you get a scrollbar when you
have many list items.
There are several ways to solve your problem.
You can also use an Iframe but I wouldn't recommend it for responsive designs.

How to make div change to fixed position when all content is visible in browser window?

Not sure if the title made sense, but I noticed in the wordpress 3.8.1 admin panel, If you resize your window to where the sidebar has menu items blocked from view, it is normal positioning, which allows the sidebar to scroll.
If all the items are visible, then the sidebar has fixed positioning so that only the content to the right of the sidebar will scroll.
Neat little effect.
I was thinking it requires jQuery to add a class or change css. Maybe if the last item in the sidebar is visible then add the class, else leave it alone.
Not sure how to actually code that though.
Can someone help out, maybe even a basic fiddle?

You can do this with simple CSS.
.div_name {
position:fixed;
}
check W3schools Position fixed property for tags

HTML Horizontal Menu that Moves on Button Click

I need to create a horizontal menu that shows all of the possible items given the browser size, the rest of the items are hidden (they do not wrap to the next line). Then there is an arrow button on the far right side of the div, which when clicked, shows the next row of items. How can I do this? I'm not asking for anyone to write the code for me, I just need some direction. Are there any examples online of this? I don't want the arrow button to move the items slowly across the screen. I need it to just "jump" to the next row.
For example if the list of items is made up of three, each li element is 100px long and the total page with is 200px, one of the elements will be hidden. Once the button is clicked the first two items disappear and the last item displays.

There are many ways to do this, you can make the ul position:relative, then the li position: absolute, when clicked, change the positon of lis to show them.

As Ji Guang said. There are many ways of doing this. All that matters is that how you would like to implement it, or better said how the rest of your project is implemented.
For the menu as Ji Guang said, you can create a horizontal style list (maybe use float left on li for that). The ul must be now declared as relative and fixed height or width with overflow hidden, or better off fix the height as much you want and set width relative to the page. For the arrow to go throw the rest of the rows what I guess you want is some type of carousel. Now there are plenty of good plugins available online for that. Or you can always have it done yourself. If you are planning to do it yourself then you need to follow Ji Guang advice. Put the menu ul inside another div and then play with ul's positioning.

Fix a div when scrolling down a page and then un-fix

I am trying to make a sidebar div sit below a header secion, when you scroll down, it will turn into a fixed div and stay fixed until the bottom of the page, once it reaches a footer section, it will stick to the top of it and allow me to scroll down the footer area without seeing it anymore.
There is a perfect emaxple of what I am trying to describe on this site http://madebymany.com/blog/apples-aesthetic-dichotomy
In the left column, it sticks as you scroll down and then un-sticks at the bottom
I am looking for a good way to do this, hopefully an example or tutorial, I realize it is done with javascript changing the divs properties. I have tried searching but all I could find was old outdated articles over 5-6 years old and they only did half the job. I am not sure even what to call this feature?

That web site is using jQuery Scroll Follow.
Note that according to the jQuery Scoll Follow web site...
The Scroll Follow object will remain inside its immediate container.
... hence why the scrolling stops before the comments on your example web site; the element which is scrolling on the page is constrained inside of its parent <aside> element. You can check out the example.

You basically handle the page's scroll event and move the box around.
Most tutorials require jQuery, so get familiar with it. If you want a tutorial, here's a working one: http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/.
Why not dissect the code of that website too?

Flyout menu with scrolling

I'm trying to create a flyout menu that has scrolling build in if its larger than the screen. I can't seem to figure out how to do this with the native overflow-y scrolling properties. Everytime I seem to set that overflow-y:auto then the the menu that flys out is nested within the parent div with a scroll bar.
Anyone has any ideas?
Thanks!

This is not a solution of mine, but you can try this.. it has a really nice effect and serves your purpose:
http://css-tricks.com/examples/LongDropdowns//

you should set the max-height proparty for the div otherwise it cant tell (since it is sort of absolutely positioned) where to stop, or u can set the height for older browsers, or you can javascript it, change height dynamically until it reaches a maximum