Develop Reference

Translate div on scroll

I have a div in a div.
The first div has a unknown height. The second one has the height of 125px.
I want to make the second one a sticky div which is only sticky in this div.
The grey box is the container and the social media div next to it should be sticky.
After the container more content will come, so I cant use position: fixed. I tried to use position: absolute and change the top value or the transform: translate, but when I Do that Chrome is jittering around.
Code that I tried to use:
$offset = $(".social-media").offset().top;
$containerHeight = $(".sticky-container").height();
$bottom = $containerHeight + $(".sticky-container").offset().top;
$maxPoint = $containerHeight - $(".social-media").height();
$(window).scroll(function(){
if($(window).scrollTop() >= $offset){
if($(window).scrollTop() >= $bottom){
$(".social-media").css({transform: "translate(0px,"+$maxPoint+"px)"});
}else{
$scroll = $(window).scrollTop() - $offset;
$(".social-media").css({transform: "translate(0px,"+$scroll+"px)"});
}
}else{
$(".social-media").css({transform: "translate(0px,0px)"});
}
});

Since the jsbin you provided shows the solution works without jittering, the problem might lie in the repaints triggered by other elements of your site, not the code you pasted. Have a look at the Google's repaint optimization guidelines, it might help you identify the issues that cause the jittering.

How do I get a div to appear outside it's container, and scroll, while keeping overflow on it's container

I'm working on a Wordpress blog design, and running into an issue with the entry-header. I would like my entry-header to be offset, going outside the bounds of it's container, yet scrolling with the content, inside the content wrap. Here is a screenshot of what i'm trying to achieve.
]1
I'd like to have the red areas scroll along with the text of the blog post, but so far, the only way I've been able to get the red areas to be offset as seen above, is to set position: absolute. When position is set to relative, it shows up as seen below.
Do you have any ideas that could help me resolve this issue?
Thanks.

give it position relative with higher z-index
position:relative;
z-index:10;
left:-50px;
JSFiddle

As user #divy3993 states a fiddle would be helpful.
Anyway: The overflow of your outer div seems to be hidden. This is the reason why you don't see the left part of your header when position is relative.
Apply the css-property
overflow-x: visible;
to your outer div (the one with the dark background) and the full header should be shown.
EDIT:
Sorry for keep you waiting.. I had a while no look at SO.
Sadly the solution that i was thinking of (with pure CSS) does not work as it is pointed out in https://stackoverflow.com/a/6433475/1402667 the combination of
overflow-x: visible
and
overflow-y: auto
won't work as expected.
So it seems you have to use JavaScript to solve your issue. I had a look at the link that you are pointing out in comments (http://basil-gen.marathonwp.com/blog/) and successfully run the following jQuery code there:
var $headers = $('.site-inner h1');
var $scrollContainer = $('.site-inner .content-sidebar-wrap');
var hideShowHeaders = function(visibleTop, visibleBottom){
$headers.each(function(){
if($(this).show().offset().top < visibleTop || $(this).offset().top + $(this).outerHeight() > visibleBottom){
$(this).hide();
}else{
$(this).show();
}
});
};
$headers.each(function(){
$(this).data('initTop', $(this).position().top);
});
hideShowHeaders($scrollContainer.offset().top, $scrollContainer.offset().top + $scrollContainer.height()); //might consider borders
$scrollContainer.scroll(function(){
$headers.each(function(){
$(this).css('top', $(this).data('initTop') - $scrollContainer.scrollTop() );
});
hideShowHeaders($scrollContainer.offset().top, $scrollContainer.offset().top + $scrollContainer.height()); //might consider borders
});
It essentially repositions the headers whenever your content container is scrolled. When the headers (or a part of those) would not be visible with position:relative those headers are hidden. In all other cases they are shown.
As i mentioned it's jQuery-Code so you need to include jQuery yet and e.g. execute above code inside
$(document).ready(function(){
...code above
});
If you want to straight test it you can browse to your site (http://basil-gen.marathonwp.com/blog/) open Javascript-Console,
inject jQuery via javascript e.g. like
var script = document.createElement('script');
script.src = "http://code.jquery.com/jquery-latest.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
and then execute above code in Javascript-Console (when directly testing it you should not have scrolled before executing javascript code).
I should mention that the code above is not perfect since it only shows and hides headers instead of showing e.g. 50% of it. I couldn't come up quickly with a solution for it. Anyway you could do this with a more complex showHideHeaders-function where marked lines need to be implemented
var hideShowHeaders = function(visibleTop, visibleBottom){
$headers.each(function(){
if($(this).show().offset().top + $(this).outerHeight() < visibleTop){
if($(this).offset().top < visibleTop){
$(this).hide();
}else{
//lower part of this header needs to be displayed
var bottomPxToShow = $(this).offset().top + $(this).outerHeight() - visibleTop;
var hiddenPx = $(this).outerHeight() - bottomPxToShow;
//show lower bottomPxToShow Pxs of header
}
}else if($(this).offset().top + $(this).outerHeight() > visibleBottom){
if($(this).offset().top > visibleBottom){
$(this).hide();
}else{
//upper part of this header needs to be displayed
}
}else{
//show full header
}
});
};
I hope that helps you!

Calculating Height of Sidebar Dynamically

I'm trying to work out the algorithm for a fixed div that grows in height (while scrolling) until it's equal to the height of the viewport or div with fixed position relative to another div and the bottom of the viewport
I am using Twitter Bootstrap affix to lock my secondary navigation bar (yellow) and my sidebar (black) to the top of the screen when the user scrolls that far. 
This works fine. The sidebar is the piece that's giving me trouble.  When it is in its in its starting position (as shown in the diagram belorw), I want the top of the bar to sit 30px
down from the secondary navigation bar (yellow) and 30px up from the bottom of the page. 
As the user scrolls, the bar should grow in height so that it remains 30px beneath the secondary navigation bar and 30px above the bottom of the screen (As shown in the diagram below)
After the bar is fixed position, I am able to do what I need to do.  
.sidebar { 
position:fixed;
top:100px;  
bottom:30px;
left:30px;
}
What I can't figure out is how to position the TOP of the sidebar relative to my
secondary navigation bar and the BOTTOM of my sidebar relative to the bottom
of the screen. I've tried calculating the height of the sidebar at the beginning and the end of the
scroll but this causes issues.
I've also tried calculating the final height of the sidebar and letting the bottom of
the sidebar just run off the edge of the screen (when it's in its initial position), but
if there's not enough content on the right side to warrant scrolling, I have no way
of getting to the bottom items in the scroll bar.  Plus my screen starts bouncing
in a really un­attractive way.
below is the current code in use:
ShelvesSideBar.prototype._resize_sidebar = function(_this) {
var PADDING = 50;
var window_height = $(window).height(),
nav_bar_height = $('.nav_bar').height() + $('.secondary_tabs').height(),
sidebar_height = window_height - nav_bar_height - PADDING,
sidebar_scrollable_height = sidebar_height - $('.bar_top').height();
_this.$container.height(sidebar_height);
_this.$container.find('.bar_bottom').height(sidebar_scrollable_height);
/* reset the nanoscroller */
_this.$container.nanoScroller();
};
   
this code is called on page load and again on window resize. Any help would be greatly appreciated!

I've been trying to do something similar (minus the fixed elements and navbars). What I found was in order to do any sort of relative height scaling every element above the element I wished to scale all the way up to the opening html tags had to have a relative height set, even if it was just height:100%;. (here's my original question Variable height, scrollable div, contents floating)
My goal was to have the body height fixed to window size like a native full screen application would be with my content subareas scrolling, so this is a bit off topic for what you're wanting to accomplish. But I tried using JS/JQ to start off with as you're trying to do currently and found that I simply couldn't get the window height because the default behaviour for height management is to expand the page height until everything on the page fits. And all the getHeight methods I tried we're getting the page height not window/viewport height as promised. So you may wish to try fixing your body's height to the window and going from there using overflow:scroll; to scroll the page.
A quick note on overflow:scroll; if you have users who use WP8 IE (and probably other versions of IE) it may be advantageous to implement FTscroller to handle all your scroll elements as the overflow property defaults to hidden and is a fixed browser property. The only problem with FTscroller is because it uses CSS offsets to move the content container it may wreak havoc on elements that are designed to switched to fix when they reach x height from top of page because technically the top of page (or rather the top of the container they're in) isn't at the top of the page anymore it's beyond it. Just something to be aware of if you do need to cater for this browser.
And apologies for the complexity of my sentence structure. :/

so I was able to figure this out, for anyone still looking. What I ended up doing was binding to the window scroll event and - whenever the scroll occurred - I check if the class "affix" has been added to the sidebar. If it has, then I perform one set of calculations to determine sidebar height. Otherwise, I perform the other set of calculations. Code below:
/* called on window scroll */
var PADDING = 70;
var window_height = $(window).height(),
nav_bar_height = $('.nav_bar').height() + $('.secondary_tabs').height(),
header_height = $('.prof_block').height() - nav_bar_height,
sidebar_height = _this.$container.hasClass("affix") ? window_height - nav_bar_height - PADDING : window_height - (header_height + nav_bar_height) - PADDING,
sidebar_scrollable_height = sidebar_height - $('.bar_top').height();
_this.$container.height(sidebar_height);
_this.$container.find('.bar_bottom').height(sidebar_scrollable_height);

Use Javascript to create a space at the bottom of page for toolbar widget

I am creating a toolbar widget that is loaded via an external javascript file. The toolbar floats at the bottom of the screen, which works fine, but the content at the bottom of the screen gets covered up (as seen in Figure A). Figure B is my goal.
The toolbar should always be visible, fixed to the bottom of the screen. If scrolling is needed on the page, the content will flow under it until it is all visible when scrolled all the way to the bottom, so that nothing gets covered up on any length page.
My first thought was to set a bottom margin of 30px (toolbar height), but since most of the websites this is designed for are setup to use the full screen (with body height set to 100%), this won't always work. Decreasing the body scrollHeight by 30px fixes this issue, but only if scrolling isn't required on the page (which sometimes is).
JSFiddle example: http://jsfiddle.net/ZbMDr/1/

Does this example work for you? http://limpid.nl/lab/css/fixed/footer

So here's a somewhat hacky solution I've come up with, that seems to work so far (I haven't done extensive testing yet). If anyone has a cleaner way of accomplishing this it would be interesting.
var bodyCH = document.body.clientHeight,
bodySH = document.body.scrollHeight;
/* insert the toolbar here */
if (bodyCH === bodySH) {
document.body.style.height = parseInt(bodySH, 10) - 30 + 'px';
} else {
var spacer = document.createElement('div');
spacer.style.height = '30px';
document.body.appendChild(spacer);
}

Scroll a div vertically to a desired position using jQuery

This is a followup question for this:
Scrollpane on the bottom, css is hacky, javascript is hard
I ended up doing the scrolling in the same way explained in the accepted answer.
Now there is a request that one item is selected somehow (eg. as an url parameter or by some javascript calls) I should scroll the pane to the item with the corresponding ID in the scrollpane. Like a link to an anchor () would work!
I want to make a javascript call like this
function scrollTo(id) {
$('#middle').magicallyScrollThatItemWouldBeVisible(itemid);
}
But this is not in jQuery (or at least I don't know of it). So is there a way to make it?
I'll post a simple jsFiddle here:
http://jsfiddle.net/ruisoftware/U6QdQ/4/
Help me write that scrollTo function!
A .animate would be fine too.
UPDATE: If it was not clear I would like it to only align to the left or right side of the panel, it it was overflowed on that side (so the minimum possible amount of scrolling happens)

It's not jQuery, just JavaScript, and I've actually never used it all, so I'm not sure how you would have to mess with it to get it to work in this situation, but there is a scrollIntoView function:
yourElement.scrollIntoView();

Since the elements have a fixed width, you can count the number of elements by using .index() + 1, and animate to this value (after subtracting the container's width).
If you want the element to be centered, use - Math.round(middle.width()/100)*50.
Fiddle: http://jsfiddle.net/U6QdQ/17/
//This code should be run on load / DOMReady
(function($){ //Run on load / DOMReady
$.fn.magicScrollTo = function(){
var middle = $("#middle");
var currentScrollLeft = middle.scrollLeft();
var width = middle.width();
var newScrollLeft = this.offset().left + currentScrollLeft - middle.offset().left;
if(newScrollLeft >= currentScrollLeft && newScrollLeft <= currentScrollLeft + width - this.outerWidth()) return;
if(newScrollLeft > currentScrollLeft){ //If the element is at the right side
newScrollLeft = newScrollLeft - width + this.outerWidth();
}
middle.animate({
scrollLeft: newScrollLeft,
}, 'fast')
}
})(jQuery);
Usage:
//Select the 4rd element, and scroll to it (eq is zero-based):
$('.item').eq(3).magicScrollTo();

Something along these lines would be a good start:
http://jsfiddle.net/vHjJ4/
This will bring the target into the centre of the carousel. I think you will have to add in some extra checks to make sure that it didn't scroll to far, for example if you targeted the first or last element...unless this is built into the scroll function (it might be).

I'm not sure I understand your question exactly, but it sounds like you're asking how to scroll horizontally to the selected item in the bottom pane. If so, try something like this:
//get the position of the element relative to the parent ("middle")
var pos = $("#itemid").position();
if (pos){
$("#middle").scrollLeft(pos.left);
}
From here, you can use the width of middle to center the item if needed.