Develop Reference

The position of my div keeps on changing based on the length of the information inside it

I have a sidebar inside a div and whenever I increase the length of the information inside the div, the sidebar changes positions. Would there be any way for me to fix the sidebar in place regardless of the information?

Can you please try this one., I have done it through flex layout. The sidebar does not change position based upon the content of main div.
#main{
background-color:#BED3E5;
overfolow:auto;
display:flex;
}
#sidebar{
background-color:#efdfbb;
flex-basis:15%;
flex-grow:0;
height:calc(100vh - 50px);
}
<div id="main">
<div id="sidebar">
</div>
asdasdasd
</div>

Div scrolling in the opposite direction

I have a page whose entire content is wrapped inside a div – <div id="wrapper"></div> This div gets applied the property transform: scale(1.3) at 1600px & above.
Inside this wrapper, I have two divs side by side with their parent div set to display: flex
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
On scrolling the content, the sidebar is supposed to stick to the top and not scroll. It does so but only when the transform property isn’t applied. Once the transform property gets applied to the wrapper, the sidebar starts scrolling in the opposite direction.
Here is link to the demo – http://cpll.co/happicities/the-happicity-model/
Set the width of your browser’s viewport to at least 1600px and you will notice this behavior.

Check this out. This may solve your problem
#thm-container #thm-container-main {
align-items: flex-start;
}

Make div fixed only inside another scrollable div

I have the page with structure something like this:
<div id="header"></div>
<div id="messages"></div>
<div class="content">
<div id="sidebar"></div>
<div id="content"></div>
<div id="other_stuff"></div>
</div>
Header is the header of the page.
Messages div is the place where I push messages. Sometimes it filled, sometimes it empty.
Sidebar is navigation menu.
Content is a long scrollable div.
And other stuff is other stuff.
I need to make sidebar be fixed in the page on the left side when content are scrolled. But sidebar should never overlay messages and header.
In other words, when I scroll down the page, header and messages are scrolled with content normally. But when I scroll up the page, sidebar should't overlay messages and header div's.
I've used CSS property position: fixed; for this but with this property sidebar overlays messages. How can I fix this with CSS and javascript/jQuery?

If I got you right, you want the sidebar to be fixed starting from a particular point.
This can be achieved through the jQuery. There are many ways, at least 3 I know. Here is the pure jQuery version i use in the cases like that (if you don't want to embed other external JS libraries)
jQuery(document).ready(function ($) {
$fixed_id = $('#Mod128, #Mod190'); //classess or IDs of the modules you want to stick
$(window).scroll(function(){
if($(window).scrollTop()>254) //amount of pixels from the top of the viewport when the sticky styles applied
{
$fixed_id.css({position:"fixed", top:0, width:"18%"}); //sticky styles items when scroll to a particular place
}
});
});
Other ways of doing that are using other JS libraries, I know 2 of them:
1) jQuery Waypoints
2) stickyjs.com
Hope that helps.

Its good if you can make jsfiddle of it or else I think something like below code can help you.
Fix height of your header and messages and give margin to the sidebar with total height of you header and messages.
#header, #messages {
height:3em;
}
.content #sidebar {
position:fixed;
margin-top:3em;
width:5em;
}
.content #content,.content #other_stuff{
width:3em;
margin-left:5em;
}

How to scroll when cursor is on the edge of div?

I have a div(menubar) that has a lot of links and these links are out of the view. I must make the div scroll to the right or left when the cursor is at the edge of the menu div, in order to bring these menu items into the view.
I am a beginner with Jquery, so any help is greatly appreciated.
Markup is in Jsfiddle

Short:
Use-ready solutions:
Scrolling-carousel
Jmycarousel (demo)
Smooth div scroll
Full answers you can read on relative questions:
jQuery plugin to continually horizontally scroll on mouseover
Looking for jQuery plugin (or code) to automatically scroll Carousel items on mousover

Take a look at this example, in this example you can see how they scroll the div when the mouse at right edge of the div. you can do the same thing.
How to Auto Scroll a div on mouse move over the margins?

Here Answer
<div onmouseover="this.className='addscrool'" onmouseout="this.className='removescrool';" style="width:100px;height:100px;border:1px solid Blue">
</div>
<style>
.addscrool
{
overflow-y: scroll;
} .removescrool
{
overflow-y:hidden ;
}

Prevent scrollbar with MarginLeft style change?

I have a big div with lots of items that I have moving to marginLeft='120%' on an event. I used overflow:hidden to keep it from showing a horizontal scrollbar. But the webpage vertical scrollbar length gets bigger when it moves to the right. I want the div to disappear off the screen(I have it HTML5 transitioning when it does that) but not affect the rest of the page. What am I doing wrong?

The content is not actually moving to the right because the container isn't wide enough so the default action is to drop the content to the next line, hence the vertical scroll.
Try adding another div within the wrapping div with a large width, that way the content will have enough room to actually move to the right.
<div id="wrapper">
<div id="inner">
<div id="content"></div>
</div>
</div>
CSS...
#wrapper {
overflow: hidden;
}
#inner {
width: 9000px;
}