We Keep Coding

Sticky Bootstrap column should end with parent/content

I have seen various forms of this problem but nothing really helped me to solve the partial sticky sidebar/Bootstrap column behaviour. Let me start with the problem itself.
There is a big image close to the top of my page. Because of the page complexity, I am using Bootstrap column grid. The image spans over, let's say, 10 columns and I have left 2, belonging to the same row, on the left side to store a sidebar. This also allows me to vertically align the sidebar next to the image.
Now, the sidebar, what is now a Bootstrap column, should go sticky and should stay vertically aligned to the viewport once the scrollbar passes by. You can see in the fiddle that it kind of "jumps" instead of transitioning smoothly.
The other problem is that the sticky element/column should only remain sticky as long as its parent/container is visible. Which means that it should transition/be relative to the end of that container. Right now I have only managed to keep it sticky till the end of the page. It should stop above the red line (depicted in the fiddle).
Here is my jQuery logic so far.
$(document).ready(function(){
$(window).scroll(function(){
var elem = $("#refScroller").offset().top - ($("#refScroller").height() / 2);
var windowvalue = $(window).scrollTop();
if (elem <= windowvalue) {
$("#wannabeSticky").addClass("sticky");
}
else {
$("#wannabeSticky").removeClass("sticky");
}
});
});
I would really appreciate some ideas and hints as this has been bothering me for two days. I would love to keep the Bootstrap grid structure if possible, but feel free to give any suggestions, even those who depict the sidebar as a pure absolute div, as long as the sticky-ness works.
Thanks in advance!
EDIT: I know there is a similar problem already here, but it seems I can't make the JS logic work for my case.

So, having spent another day on it, it seems I reached a decent jQuery version that gets the job done. There is my updated fiddle.
$(document).ready(function(){
var passedMobileNavi = false;
function stickySocialNavi(reference, valueExtracted) {
var refTop = $(reference).offset().top - valueExtracted;
var scrollTop = $(window).scrollTop();
return (refTop <= scrollTop);
}
$(window).scroll(function() {
if (stickySocialNavi($("#refScroller"), $("#refScroller").height())) {
if (!passedMobileNavi) {
passedMobileNavi = true;
$("#wannabeSticky").addClass("sticky");
}
}
else {
passedMobileNavi = false;
$("#wannabeSticky").removeClass("sticky");
}
if (stickySocialNavi($("#end"), $(window).height())) {
var var1 = $(window).scrollTop(),
var2 = $("#end").offset().top,
var3 = $(window).height();
var calculateOffset = (var2 - var3) - var1;
$("#wannabeSticky").css("top", "calc(50% + " + calculateOffset + "px)");
}
else {
$("#wannabeSticky").css("top", "50%");
}
});
});
For the sticky-ness to start, I took the reference point (which is the non-moving element right next to it) and its height. The sticky element gets a fixed position as long as the scrollbar goes past the reference point's center.
As the stick element is centered, it gets additional top offset values when the end of its container is reached. It is still fixed, but its top property's value takes the scroll difference, thus slowly depicting it towards the end of the container.
I don't know if this is the most elegant, straightforward, or easy to implement/understand solution, but it worked for me.

On stop scrolling auto position column

i'm working on a split scrolling site with two columns. And it's working great, but there is one problem i can't seem to solve. It's when i stop scrolling and the columns are positioned like this:
They need to automatically position themselves next to each other, so the user gets to see the full nicely aligned image. Now i've tried using Jquery Inview:
$('.content:nth-child(2)').one('inview', function (event, visible) { // i know the selector is wrong just for example purposes
if (visible == true) {
$('col.left').css( "top", "0" );
} else {
// element has gone out of viewport
}
});
But that doesn't seem to do the trick.. Using inview is probably the wrong way to go anyway. Now i have tried googling a solution but i can't seem to be able to find anything that does the trick. Does anyone know a plugin that does this for me? Or if someone can point me in the right direction that would be awesome.
JSFIDDLE
Thanks in advance

You could call a function to align the left and right after the user has completed scrolling. This example assumes the left and right columns are the same (as in your example).
...
$(window).scroll(function () {
$('.right').css('top', (top + $(window).scrollTop()) + 'px');
clearTimeout(t);
t = setTimeout(function(){scrollend();},200);
});
function scrollend(){
//console.log("scrollend");
clearTimeout(t);
$('.right').css('top', (0 - $(window).scrollTop()) + 'px');
}
...
E.G: http://jsfiddle.net/u9apC/4/

Javascript/ jQuery plugin

It is not a real jQuery plugin, but for my problem i didn't know what title was appropriate.
This is the "Plugin" --> http://jsfiddle.net/djrikyx/GuumY/9/
There are 3 Youtube player, with the possibility of Pop out them into draggable DIVs and also minimize them to the right.
I can't explain my problem only with words, you have to see it to better understand.
First, popout all 3 players, then minimize them, they will go on the right, each one below the previous.
Then if you try to Close, or Maximize the one in the middle or the last, you will see that all will go up for 30px.
I know that now is doing that, because i wrote to do that in the function maximizePlayer() and popinPlayer() using
var countMP = $('.uiVideoHandleMin').length;
uVC.removeClass('uiVideoContainerMin');
if(countMP > 0){
$('.uiVideoHandleMin').each(function(){
var top = parseInt($(this).css('top'), 10);
top = top-30;
$(this).css({top:top});
});
}
I don't want that. I want so the first one must be always at 50px from top, and the other just below. So if i close the middle one, the first will stay in position, and the last will go up, and if i close the last, nothing happen.
But i really don't know how i can do what i want, so i'm here asking for a tip/solution.

I changed it to this http://jsfiddle.net/Klors/GuumY/11/ which seems to work?
There is a line in your function popinPlayer(elem) { that reduces the css top by 30, but doesn't check to see if it's 0 (or below the removed handle) first.
So I changed top = top-30; to top = top > thisTop ? top-30: top; and added in var thisTop = parseInt($uVH.css("top"), 10); before you reset top on $uVH, which seems to work.

you can do:
function SortByTop(a, b){
var aTop = parseInt($(a).css('top'), 10);
var bTop = parseInt($(b).css('top'), 10);
return ((aTop < bTop) ? -1 : ((aTop > bTop) ? 1 : 0));
}
on maximizePlayer() to sort all $('.uiVideoHandleMin') and then just do:
$.each(minarray,function(i,n){
$(this).css({top:(i*30)});
});
jsfiddle

advice on how to fix the prev and next buttons of content slider

I'm trying to add in previous and next buttons to my content slider but seem to be having problems, what I would really like to do is move the $slideCtn left or right by the width slideWidth each time the previous or next button is clicked but i'm unsure how to increment each click by the value of slideWidth. I've tried ++ and -- etc but with no results, would anyone be able to show me the best way to do something like this? Also any other advice very welcome!
Or should I create a global index variable that gets set at 0, then as the pagination x's are clicked or the prev/next arrows are clicked update this global variable?
JS Snippet
//Add previous + next arrows
$dirArrows.on('click', function(e){
var arrDir = $(this).data('dir');
$slideCtn.css('left', ( arrDir === 'prev' ) ? -(slideWidth) : +(slideWidth));
e.preventDefault();
});
JS Fiddle
http://jsfiddle.net/SG5ad/10/

At the moment, you're telling it to move to an absolute position - either -200px or +200px (never 0px, 400px, 600px, etc).
You'll need to take into account its current position as well as how much you want to adjust it: http://jsfiddle.net/SG5ad/12/
var arrDir = $(this).data('dir')
iLeft = parseInt( $slideCtn.css('left') );
$slideCtn.css('left', ( arrDir === 'prev' ) ? iLeft - slideWidth : iLeft + slideWidth);
A bug you'll want to fix as well is that the Next/Prev buttons do nothing until you've already jumped to a specific slide with the "x" navigation.
As an entirely separate issue, about 6 months ago I wrote something like this as part of a project at work (it had a few more bells and whistles, but nothing drastically different), and there's one important thing I'd say is worth changing.
In order to go from slide a to slide d at the moment, you animate slides a,b,c and d, which means that
a) 4 slides are animating instead of 1 (plus all their child elements)
b) you have to pass through slides b and c even though they're not relevant
I'd have a look at changing the base position of all your slides to be stacked on top of each other using z-index, then simply animating the top slide off to one side to reveal the one underneath it. It requires a bit of code to track which slides are where ($.data() may help there) but gives you a much more performant slider at the end of it.

You've gotta do it with .animate()
$dirArrows.on('click', function(e){
var arrDir = $(this).data('dir');
if (arrdir == left){
$slideCtn.animate({
left: "+=250"
});
}
});

JQuery animated banner

So I previously asked a question about how to create a banner like the one shown here and I got a really good answer to start me off. I have been working on it since and I'm having a lot of problems getting the animation to slide back to it's original position.
Here is my animation: http://jsfiddle.net/43nCF/ (don't click the green block first)
Issue: After the first time you toggle a block, clicking another block will not move it to the left.
I also have some other minor issues which I would be grateful if someone helped me with.
How do I get the width and the moving of the blocks to animate simultaneously like in the banner animation I am trying to replicate?
How do I get the block to slide back to the original position instead of just kind of 'transporting' there?
I am only beginner at jQuery so any help would be amazing.Thanks.

As for the positioning problem: you need to drop the left declaration in your second function.
Regarding making the animation act simultanous: animate both the right and the width property for each element, in one call:
function() {
var position = $.data(this, 'position');
var ind = $(this).index();
//moves image back to original position
$('#container div').each(
function() {
$(this).animate({
right: "",
width: 100
});
});
});
Working example here.

I see you have a response.
In case this version is of any help to you:
http://jsfiddle.net/vCbcz/
Instead of altering the divs other than the one being affected, I wrapped them all in a #slider div and adjusted that one's left margin to push it to the left.
$('#slider').animate({
marginLeft: '-' + ind * 105 + 'px'
});
and back
$('#slider').animate({
marginLeft: 0 + 'px'
});

There is a much easier way altogether of doing this. By using jQuery's scrollTo plugin, this can be done in a mere few lines of code, without using indices, calculations, or anything of that nature.
Live Demo http://jsfiddle.net/Jaybles/WEzny/