Develop Reference

Position fixed but still scrollable?

Would it be possible to have a DIV position: fixed, but if the content of that DIV extend beyond the viewing area of the screen then you could still scroll with the window? I've put everything I have thus far in this...
FIDDLE
This code sits inside a media query that gets triggered when the screen hits a max width and/or a max height, but I don't think that code is relevant to my question. This is the bit of code that I believe I need to modify to work correctly:
.expand {
display: block !important;
position: fixed;
-webkit-backface-visibility: hidden;
top: 50px;
left: 0;
background: rgba(31, 73, 125, 0.8);
width: 100%;
z-index: 999;
}
The reason I want this fixed is so the little hamburger menu stays statically in the upper left hand corner of the screen at all times, as at times the site I'm building could be rather lengthy, so I would like viewers to have a little more ease of access.
Thank you!

Yes, you just need to give the div a fixed height and the overflow: auto setting
(Demo)
.expand {
bottom: 0;
overflow: auto;
}
If you don't want to give it a minimum height, a simple (but not supported by old browsers) option would be to use css calc() like so
.expand {
max-height: calc(100% - 50px); // 100% viewport height minus the height of the nav.
}
I would suggest setting a fallback height before in case the browser does not support calc
JavaScript
To achieve what you really want you need javascript. Here it is.
Check to see if the menu is open, if not...
Define a check to see if the contents are larger than the viewport, if so then set bottom: 0px; and overflow: auto and remove scrolling from the body.
If so...
Remove all styles from the menu and the body that were added when opening the menu.
(Demo)
(function($) {
var menu = $('.responsive-menu'), open;
$('.menu-btn').click(function () {
if(!open) {
if(menu.height() > $(window).height()) {
open = true;
menu.css({'bottom': '0px', 'overflow': 'auto'});
document.body.style.overflow = 'hidden';
}
} else {
open = false;
menu.css({'bottom': '', 'overflow': ''});
document.body.style.overflow = '';
}
menu.toggleClass('expand');
});
})(jQuery);

Stop relative divs scrolling past a certain point

How can I stop relative divs scrolling past a certain point?
Here's a fiddle to help you understand
Basically, I want to be able to scroll as normal, the only difference being is I don't want to see anything behind the header tag, i.e. as it stands when you scroll, you can see the divs through the header tag, I want it so when it scrolls, the cut off point is the bottom of the header tag so when scrolling you won't see anything past the header line.
Hope that makes sense.
Here's the header css
#header {
height:40px;
width:100%;
background:transparent;
position:fixed;
border:1px solid black;
top:0;
}

You could give your header a (non-transparent) background-color, or create a new scroll-area below the header with overflow: scroll/auto

just modify the css for #header as follows :
background: white;
This happens because you have made the background transparent.
for scrolling you can add following jQuery:
var windw = this;
$.fn.followTo = function ( pos ) {
var $this = this,
$window = $(windw);
$window.scroll(function(e){
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
});
};
$('#header').followTo(250);

You use jquery scrollTop for this
$(window).scroll(function(){
if($(window).scrollTop() >= 229){
alert("in if");
$('#header').css({position:'relative'});
}else{
alert("in else");
$('#header').css({position:'fixed'});
}
});
Fiddle

Fix menu bar at top of page once header has been scrolled past

Firstly I apologise if this is too open-ended a question.
I am aware of making the header of a web page static so it is always visible at the top of the viewport and the content passes beneath it as you scroll down. This can be achieved purely with css.
I was wondering how you would achieve letting the header scroll off the page but leave a horizontal menu bar static at the top. http://www.forexfactory.com is a perfect example of this.
I see it calls a JavaScript function onHeaderComplete.execute() which I assume applies extra css style to the nav bar when the header scrolls off but I'm unsure of how it works. Any basic explanation appreciated as my JavaScript skills are relatively limited.

I just answered similar question. CHECK THIS QUESTION
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickyheader').css({position: 'fixed', top: '0px'});
$('#stickyalias').css('display', 'block');
} else {
$('#stickyheader').css({position: 'static', top: '0px'});
$('#stickyalias').css('display', 'none');
}
});
});
DEMO

You can write like this:
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('div').addClass('fix');
} else {
$('div').removeClass('fix');
}
});
CSS
.fix{
position:fixed;
top:0;
left:0;
right:0;
margin:0;
}
Check this http://jsfiddle.net/a42qB/

You could also do it with pure CSS by creating your menu twice. It's not ideal but it gives you the opportunity have a different design for the menu once it's on top and you'll have nothing else than CSS, no jquery:
<div id="hiddenmenu">
THIS IS MY HIDDEN MENU
</div>
<div id="header">
Here is my header with a lot of text and my main menu
</div>
<div id="body">
MY BODY
</div>
And then have the following CSS:
#hiddenmenu {
position: fixed;
top: 0;
z-index:1;
}
#header {
top: 0;
position:absolute;
z-index:2;
}
#body {
padding-top: 80px;
position:absolute;
z-index: auto;
}
Here is a fiddle for you to see: https://jsfiddle.net/brghtk4z/1/

Shrink a fixed Div after user has scrolled 175px with animation

I have a div that is fixed at the top of the page, which holds the navigation to the website. It has a height of 175px. This DIV will remain on show as you scroll down the page.
I would like this div to shrink to a height of 90px when the user has scrolled down the page 175px and remain at 90px as they scroll down the page. When they scroll back up to the top, I'd like the DIV to grow back to its original 175px height.
I'd like this to animate when doing so (preferably slide up and slide down) and would prefer to use CSS3 to do so...
Here is a fiddle of what I have so far but because I'm a query noob, not sure how to go about things… http://jsfiddle.net/bnsUB/
EDIT:
I forgot to mention that I also have content within this DIV that will need its paddings etc. adjusted whilst the container slides up/down. So if those padding values could shrink/grow as well then that would be an added bonus

You need to trigger an action based on the current $.scrollTop() value of the window.
Something like:
$(document).scroll(function(){
if ($(this).scrollTop()>175){
// animate fixed div to small size:
$('.wrapper').stop().animate({ height: 90 },100);
} else {
// animate fixed div to original size
$('.wrapper').stop().animate({ height: 175 },100);
}
});
Here goes:
http://jsfiddle.net/bnsUB/4/
If you want to animate any other thing (such as paddings and margins), just add them as values to the object you pass to the .animate() function. ( for example - { height: 175, 'padding-top': 20, 'margin-top': 10 } etc. )

$(window).scroll(function()
{
if ($(window).scrollTop() == $(document).height() - $(window).height())
{
$('#tt').animate({height:'90px'}, 500);
}
});

Here is a solution in vanilla JS and CSS animation:
JS:
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 175 || document.documentElement.scrollTop > 175) {
document.getElementById("header").classList.add("narrow");
} else {
document.getElementById("header").classList.remove("narrow");
}
}
CSS:
#header{
transition: 0.2s;
height: 175px;
}
#header.narrow{
height: 90px !important;
}
#header .anyelementclass{
transition: 0.2s;
}
#header.narrow .anyelementclass{
/* any style here */
}

floating menu bar in containing div (js)

I have a JavaScript menu bar that is positioned on my webpage, then when the browser bar reaches the top of the menu it locks into a fixed position and moves with the window. However, i need to contain the menu within a div, how can this be done?
This is my menu bar:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$(window).scroll(function(){
if ($(window).scrollTop() >= 200)
{
$("#floatbar").css({position:'fixed',left:'0',top:'0'});
}
else
{
$("#floatbar").css({position:'absolute',left:'0',top:'200px'});
}
});
});
</script>
and this is my html:
<div id="menu_runner">
<div id="floatbar">
Issue 49<br />
Issue 48<br />
Issue 47<br />
Issue 46<br />
</div>
</div>
and my css:
#menu_runner {
width: 100px;
height: 2000px;
float: right;
position: relative;
}
#floatbar {
width: 70px;
position: absolute;
top: 200px;
}
where the menu runner is the containing div of the menu, and the floatbar obviously contains the menu which runs the JavaScript.
However when I try this code, the menu sticks to the left and 200px from the top, and not within the menu_runner div. How can i make the floatbar be positioned in the menu_runner div and then scroll down with the JavaScript within the div as it should.
Here's a live demo of my code: http://jsfiddle.net/f4dhy/

Here's one method:
Live demo
Javascript:
$(window).scroll(function() {
if ($(window).scrollTop() >= 200) {
screenWidth = $(window).width();
containerWidth = $("#menu_runner").outerWidth(true);
pos = screenWidth - containerWidth;
$("#floatbar").css({
position: 'fixed',
left: pos,
top: '0'
});
}
else {
$("#floatbar").css({
position: 'absolute',
left: '0',
top: '200px'
});
}
});
The idea is get the screen's width, the menu container's width, and from that we get figure out how to position the left edge of the menu so that it lines up with the container.
In your css, add:
body{
padding: 0;
margin: 0;
}
which fixes the slightly off positioned problem you'd see without it due to the default margin set by browsers.
You might see the menu kinda bounce into position when you scroll it to the top, which is unfortunate but hopefully not too much of a problem.
This doesn't work in IE6 because of the position:fixed being used. You'll have to search for a solution to that. I'm not too familiar with what the accepted workaround is (but a quick google search shows a few hacks that might work)
I'm curious though, any reason you want to do it this way? Why have the menu scroll with the screen and then stop at the top? Why not just fix it to one place on the screen from the start, something like this?