We Keep Coding

how to get sidebar scrolling like wired website?

i have tried to replicate the sibebar scrolling used on wired.com but no luck yet :/
link - https://www.wired.com/story/the-bike-share-war-is-shaking-up-seattle-like-nowhere-else/
few things i have noticed-
the sidebar changes height dynamically depending on the content(can be a big picture or an ad) which is wider than the content in the middle portion
then it gets pushed up by that content.
After all have moved up, the sidebar appears again and sticks until it comes in contact with any such content.
i checked the source and it seems the sidebar is finding the height of the wider content and matching to it , and then the next , and in the last its 100%
PS - i am new to web development and any help would be immensely appreciated :) , thanks:

this is what i have tried
$(function(){
var d = $('#sidebar');
var dPosTop = d.offset().top;
var win = $(window);
win.scroll(function(e){
var scrollTop = win.scrollTop();
if(scrollTop >= dPosTop){
d.fadeIn(500);
}
else{
d.fadeOut(200);
}
});
});
$(document).ready(function(){
$("#sidebar").height( $("#content").height() );
});

Sticky sidebar is jolty if its shorter than the window height?

I have a sticky sidebar that when you scroll becomes fixed when the bottom of the sidebar is in view.
If the sidebar exceeds the length of the page as it does in this demo all works fine when you scroll and is exactly what you would expect.
However if the sidebar is shorter than the window height as in this demo, it seems to be jumping when you scroll and I can't work out how to get it to stop jumping and to be smooth. In other words it should only be fixed when the base of the sidebar hits the base of the window.
I'm not great with jQuery so any help would be greatly appreciated.
$(function () {
if ($('.leftsidebar').offset()!=null) {
var top = $('.leftsidebar').offset().top - parseFloat($('.leftsidebar').css('margin-top').replace(/auto/, 0));
var height = $('.leftsidebar').height();
var winHeight = $(window).height();
var footerTop = $('#footer').offset().top - parseFloat($('#footer').css('margin-top').replace(/auto/, 0));
var gap = 7;
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y+winHeight >= top+ height+gap && y+winHeight<=footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', winHeight-height-gap +'px');
}
else if (y+winHeight>footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', footerTop-height-y-gap + 'px');
}
else {
// otherwise remove it
$('.leftsidebar').removeClass('leftsidebarfixed').css('top', '0px');
}
});
}
});
Is it possible to combine the two instances? So if its shorter stay relative till the sidebar reaches the bottom, then act as it is now if the sidebar is longer?

The code works just as intended. This is actually a conceptual problem.
Picture how it would work first. The way you described it working seems to be exactly how it's working in your demo. When the sidebar is longer than the page, the scrolling page reaches the bottom of the sidebar before the leftsidebarfixed is added. That would be impossible with a shorter sidebar.
You may want to consider fixing the sidebar to the top, instead of the bottom (as most websites with sticky sidebars do) or having a taller header, so that the sidebar starts at the bottom.

Changing "menu bar" div from relative to static using Javascript

I have this site that has a 100% width div approximately 700px from top of page. When user scrolls page down and reaches the menu, it changes to fixed and stays on top of page until user scrolls up back. I have implemented this code I found on http://jsbin.com/omanut/2 :
<script type="text/javascript">
var fixit = document.querySelector('.topmenu');
var origOffsetY = fixit.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? fixit.classList.add('topfix') :
fixit.classList.remove('topfix');
}
document.addEventListener('scroll', onScroll);
</script>
"topmenu" is a unique class I used for the menu bar div element. "topfix" is a class defined inside some html < style > tag:
<style>
.topfix {
position: fixed;
top: 0;
}
</style>
As you can see, this code shall add "topfix" as class for the div in question. So my html should change from < div class="topmenu" > to < div class="topmenu topfix" >. IT WORKS BEAUTIFULLY GREAT on Chrome and Firefox BUT I cannot make it work on IE. I'm a noob with programming but I think there could be something missing for adding an event listener that would work on IE. I will appreciate the help.
--After some answers, I made some modifications to the script; it is cool on Chrome/FF but still does not work on IE, so here you have it:
<script type="text/javascript">
var fixit = document.getElementsByTagName('div')[3];
var origOffsetY = fixit.offsetTop;
function onTopScroll(e) {
window.scrollY >= origOffsetY ? fixit.classList.add('topfix') :
fixit.classList.remove('topfix');
}
document.addEventListener('scroll', onTopScroll);
document.attachEvent('onscroll', onTopScroll);
</script>
I'm not sure about attachEvent syntax. Any further help will be appreciated.

What is the version of your IE?. document.querySelector() is not supported in every IE. You can use getElementsByTagName and match for the particular class and then do your thing.

try attachEvent for IE not addEventListener

jQuery position element from the mouse point (and more)

I'm writing a jQuery plugin for adding context menus to elements.
Now, I need to fix the position of the context menu. If there is not enough space to show the entire context menu from the mouse bottom, then it should show from the mouse top.
I tried some things but not works like I want.
Here is the code on jsFinddle: http://jsfiddle.net/evandroprogram/pRPQq/
Thank you.

Here you go mate, I've forked and updated your fiddle here
http://jsfiddle.net/joevallender/j5Vy9/
The code change is this
var screenBottom = $(window).scrollTop() + $(window).height();
var menuHeight = _contextMenu.height();
var menuBottom = menuHeight + options.positionY;
if(menuBottom > screenBottom) {
_contextMenu.css({
top: "-=" + menuHeight
})
}
Placed just after you set _contextMenu.css()
EDIT Just tested again and that isn't pixel perfect but it does work and should give you a decent clue if you want to tweak it :)

fixed div on bottom of page that stops in given place

I have fixed div on bottom of my page that works well. I wonder if there is some simple way to make it "stop" on some place in page when user srolls down to it. I want it to remain fixed on bottom, until user scrolls down to some defined place on page and than stick it to the page and scroll like the rest of content. Any suggestions?

I tried setting something up on jsfiddle. While I was writing it up, I see that others have posted their alternatives. In case mine helps in any way: http://jsfiddle.net/PnUmM/1/
I set the position to relative in the CSS, calculate where it is on document load to keep the info aside and then set it to fixed.
var sticky_offset;
$(document).ready(function() {
var original_position_offset = $('#sticky_for_a_while').offset();
sticky_offset = original_position_offset.top;
$('#sticky_for_a_while').css('position', 'fixed');
});
$(window).scroll(function () {
var sticky_height = $('#sticky_for_a_while').outerHeight();
var where_scroll = $(window).scrollTop();
var window_height = $(window).height();
if((where_scroll + window_height) > sticky_offset) {
$('#sticky_for_a_while').css('position', 'relative');
}
if((where_scroll + window_height) < (sticky_offset + sticky_height)) {
$('#sticky_for_a_while').css('position', 'fixed');
}
});

I made this up for you: http://jsfiddle.net/XCYFG/1/.
$(document).ready(function() {
window._div1 = $('#div1'); //selector is expensive
window._window = $(window);
$(window).scroll(function(e) {
_div1.css("top",
Math.min(_window.height(),
window.scrollY + 100)
+ _window.height() - _div1.height() - 110);
}).scroll();
});

I have a plugin that does the opposite - it's in the flow of the webpage, and when the user scrolls past it, it gets fixed to the viewport. What it actually does though is apply a css class to the element, so you should be able to use it as is.
You can find the plugin here:
https://github.com/hanssonlarsson/jquery-fixedscroll
Then I would suggest you have your element in the flow of your webpage:
<div id="sometimesFixed">content</div>
With css:
#sometimesFixed {
position: fixed;
bottom: 0;
}
#sometimesFixed.scroll {
position: static;
}
And apply the plugin like so, in your JavaScript:
$('#sometimesFixed').fixedscroll({className: 'scroll'});
There is also a more general plugin, very new, called jquery-waypoints. The idea is to bind any code to "waypoints", points on the webpage where, when the user scrolls past them, some code is executed.
https://github.com/imakewebthings/jquery-waypoints
It's probably more optimized and a better fit than my plugin, but YMMV!