Develop Reference

When div reaches bottom of window, stick and scroll over next div

I want to create this sliding scroll behavior in between divs. Let's say that the markup looks like this:
<main>
<div class="slide">Content</div>
<div class="slide">Content</div>
<div class="slide">Content</div>
</main>
Every .slide div would have different heights depending on the content inside them and would of course also change it's height depending on window size.
What I want is that when each div reaches it's bottom when scrolling the page, I. e. when the bottom of the div is at the bottom of the window, the div should become fixed and the div underneath should then scroll over the previous fixed div. And this behavior would be repeated for each div within the container (in this example main).
Do you have any ideas for how this could be achieved?

I figured that adding the following to each section through JavaScript (in my case jQuery just for this exercise) will make each div behave like I wanted on scroll:
$(".slide").each(function(){
$(this).css({
"top": `-${$(this).height() - $(window).height()}px`
})
})
Essentially applying a CSS top value that is the div height minus the window height.
This would also require the divs to have position: sticky applied to them through CSS.

Animate div but keep height dynamic

I have the following scenario on JSFiddle: http://jsfiddle.net/psax3fge/
D FIDDLE: http://jsfiddle.net/psax3fge/1/
Basically its a div that has some info in it. The info is 3 separate divs that are inline block, they will be next to each other if there is enough room but will stack underneath each other when the Windows is made smaller
I want this div to be hidden until a button is clicked where the div slides down. I know not setting the height property will make the div have a fluid height (height gets bigger as things stack underneath each other). However, when I animate it with jQuery, I have to set a height.
Is there a way to do this without losing the fluidity of the div? An alternative is to not animate the div and just make it visible/hidden on button click, but I'd really like to use the animation

Update 4: http://jsfiddle.net/psax3fge/4/
Leave the .container div height to auto and remove the overflow from it.
Now you can use the slideToggle function of the jQuery to show and hide the .container.
P.S you can set display:none to container in initialization.

Fix position of div tag inside dialog op-up

I have dialog box which comes on clicking a button. In the dialog box i have a button and other content. I want to make that button position fixed inside dialog pop-up.
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 50) {
$('#footer_buttons').addClass('sticky');
}
else {
$('##footer_buttons').removeClass('sticky');
}
});
<style>
.sticky{
position : fixed;
}
</style>
I used above code to make the button position fix, it worked outside the dialog box but not working when the same code is used inside the dialog box. I can make a button fix by adding a min-height to dialog and make the dialog content scrollable. But I don't want to add any scroll to the content inside dialog box.
Can any one help me out. Thanks in advance

From MDN CSS position property:
fixed:
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page.
So it doesn't matter where your element is. If you apply the fixed position, the top, left, right, bottom values are relative to the screen's viewport (visible area in browser).
In your case you should use absolute positioning and set the position using two of the four positioning properties: top, right, bottom, left. Don't forget to add position: relative or absolute to the modal container.

sidebar between main and modal div

In my website, I have the main div (where I have all my contents) and a hidden div (used to show detail about some content when the user select once).
The problem is that I can't have that : "When the user clic on one content or item, modal div is showed (in front end using z-index :) ) and the slidebar in the right of screen can be used to scroll in this modal (not to scroll the back end content). And when modal div is closed, this scrollbar will be used to scroll the main page contents".
This is what I exactly want to get : http://pinterest.com/rasagy/font-picker/

you can use this http://jqueryui.com/dialog/ read how to implement jquery ui, there is the dialogbox, and you set a high and all, scrollbars, panels, content, etc.
To call it you just do something like $( "#dialog" ).dialog();
where dialog its the ID of the div that you want to show up in the modal box.

What you would want is to make the "modal div" the full size of the page
div.modal{
...
height: 100%;
width:100%;
overflow:auto;
}
and then make the overflow of body hidden on click. this would give the illusion that the scroll bar hasnt changed when in reality it has.
body.hidescroll{
overflow:hidden;
}
Then when you close the modal div just remove the class from body.
all the javascript for this is pretty trivial so I haven't included it.

you can operate the window scrollTop only

Adjust scroll position relative to center on window resize?

So basically I have 3 inline-block divs that are stacked horizontally as such:
div1 -- div2 -- div3
div1 and div3 are skyscraper ads, and div2 is my main content wrapper. The problem I had initially was that whenever I resized my window to make its width smaller than the divs' widths combined, div2 and div3 would wrap to the next line underneath div1, because they did not fit on the same line (same problem when viewing website from smartphone or tablet because they have small width), and div1 (an ad) would sit there awkwardly centered on the main page. I fixed that by adding white-space: nowrap to the body tag to prevent the divs from wrapping, and adding white-space: normal the content-wrapper div to prevent it inheriting from the body element so that the content text can wrap normally. This fixed the problem and now when I visit the website, the three divs are always on the same line regardless of the browser width, and there's a horizontal scrollbar if needed.
However, the scrollbar always starts at the left side and so my content-wrapper (div2) which is my main content that should be centered is not. Instead div1 (ad) shows up first on the left side followed by the content-wrapper. How can I correct this situation? I know the divs will be centered just the way I want them if I were to get rid of the word-wrap on the body, but that would bring back the initial problem of the divs wrapping when they shouldn't. Is there anyway I can fix both problems using CSS?

I've done something similar once where I needed a column to be offset to the right of the main content area. It was easy enough to position the column off to the right, but the real trick was preventing it from affecting the overflow/scroll of the page.
The solution was to add the following two properties to a container that wrapped my main content and column:
#wrap {
min-width: 960px;
overflow-x: hidden;
}
I've adapted this to show how it can be used in a 3-column layout with two skyscrapers on either side: DEMO