We Keep Coding

When resizing window and then scrolling down, some elements get apart from each other

I got a website (which I didn't made) that, when I resize to test responsiveness, it works normally, though, when getting it back and scrolling down (and then up), there seems to appear a gap between the header and the element under it.
Site: http://miriam.mx/index/
Before resize and scroll:
After resize and scroll:
The site is using a lot of plugins and css:
The thing is that I need some hint to solve it, since I'm not experienced with any of those CSS works yet.

This has to do with your sticky code. Looks like you are using Sticky-Kit. It's setting the height of the sticky div to a height bigger than your children elements. You are using 1.1.1, which they have 1.1.2 and that seems to add some support with auto adjusting when scrolling. You could also play around with the recalc settings.

Mark key positions on a scrollbar

I have a div with its own scrollbar using the overflow: auto property.
With this div I display a table. For some of the rows I would like to display markers on the scrollbar of their positions within the div.
At the moment I am calculating the position of the desired rows I want to mark within the scrollbar by subtracting the offsets from the parent div, and then I am creating div with their fixed position
With the newly created div, how do I display that position on the scrollbar rather then in the div or is it even possible to add fixed divs on the scrollbar?

There's really no good way to do this. The scrollbar created by overflow: auto is a bit of a weird beast: its size and metrics are dependent on the browser and OS, and cannot be reliably detected by Javascript.
(For example, the scrollbar on most Windows systems will have "buttons" at the top and bottom, but the Mac OS scrollbar does not; this changes the positioning of the scroll thumb for content, as it affects the overall length of the scrollbar. In fact, the Mac OS scrollbar is invisible by default on many systems, so attempting to position content over it will look rather strange!)
About the only way I can imagine going about this would be to forego the native scrollbar entirely and use a Javascript-created standin, but those tend to have wonky behavior that will piss users off. Unless this feature is extremely important to you, I'd be inclined to write it off as impossible.

Tweaking scrollbar

Is it possible to programmatically change scrollbar's properties? Let's say I have a long table, where rows loaded lazily, and I want to emulate "paging" using vertical scrollbar.
Finite number of rows and current position in the dataset are known, based on that can I change scrollbar range and thumbtrack height? Let's say it displays only 100 rows at a time, but actual number of rows in dataset is 10000, can I make scrollbar look, like the table has 10000 elements?
Basically I want to control scrollbar's thumb height and position. Possible, no?
I guess somehow I can hide the scrollbar and build my own input type="range" and position it vertically, but I'm curious if it's possible to tweak scrollbar directly?

I do not believe it is possible as of today. (October 8th 2014)
If you use the latest stable version of chrome (37), the inspection tools do not show a shadow root for any scrollbars. We can use this as proof that it is not editable as a majority of the elements are now implemented and can be customized by shadow dom can be viewed having a shadow.
this gives an example of styling the video player.
example link shows them actually styling an input type="range" element. (in case that is of any use)
This probably for 2 reasons.
1 scrollbar implementation and its look and feel is os dependent.
The scroll bar on windows is a different size than the scroll bar on mac.
2 scrollbar user interaction is also dependent on the type of device.
For example on macbook pro laptop the scroll bar is different upon having a mouse plugged in.
Android does not even show a scrollbar at all except when actively scrolling.
tl;dr
as of right now the scroll bar world is too fragmented for native scrollbars to be styleable by html.

You could this with the Mousewheel jQuery plugin, but it will only work if the user uses the scroll wheel.
I don't think it's possible to disable the user from manually scrolling by dragging the scroll bar.
You could hide the scroll bar entirely, though, by setting overflow:hidden to body.

Completely disable ANY kind of vertical scroll in a DIV

I need to disable ANY kind of vertical scrolling within an overflown DIV (I would still be able to scroll it horizontally).
overflow:hidden with CSS won't work since you can still scroll with the mouse wheel click / smartphone touch scroll. The only thing this does is hide the scroll bar, not disable it.
Is there any way to do this with Javascript or jQuery?
Thanks in advance.

Have you tried reducing the height of the div so there is no where to scroll.
You could put the screen height into a variable (or slightly less) and then make the div the same height therefore cutting off any content with the overflow hidden.

fullscreen IE javascript

I need what this...
$('#gatewayDimmer').width($('html').width());
$('#gatewayDimmer').height($('html').height());
$('#gatewayDimmer').css('display','block');
...is controlling to occupy the full screen/scrollable window. In FireFox, it does except for maybe...11px thats initially under the vertical scrollbar(when you use the horizontal scrollbar and scroll right, you can see the area under the vertical scrollbar was never occupied). In IE(7 at least), it occupies everything in the initial window, even the area underneath the vertical & horizontal scrollbars, but after scrolling down past the area the horizontal scrollbar would've covered, it doesn't occupy anything(it stops). I need every inch, pixel, etc. covered, from head to toe. To lock it, if you will. Is there something I can add, change here? Thanks in advance

The following seems to have worked:
$('#gatewayDimmer').css({display:'block', position:'fixed'});