We Keep Coding

Topbar covering webpage header

I'm making a website and want a navigation bar that stays at the top of the screen. I can do this fine but when I scroll to top it goes above header. How do I get it to stop scrolling with the user before the top of the page? I have watched countless tutorials but none seem to work. I think I need JavaScript to unstick the bar at a certain height, but unsure how. Also how do I restick it when the user scrolls back down?

Yes, you will need JavaScript to handle this. It is not too complicated, but you will basically need to add an event handler for the scroll event on the window, and inside the handler you can check the scrollTop of the window to see how much has been scrolled. When it has been scrolled "enough" (usually the height of your header) you can then switch the position of the header to fixed.
You can see a demo about it on the excellent CSS Tricks, and there are many tutorials and plugins that can help with this.

Yes, as danwellman said, you need js.
I have a small code I used in my webpage.
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 51
});
You need a file like "scrolling-nav.js" or anything you prefer. And in your html, don't forget to call it.
// In the end or in the beggining you call your js file
<script src="...(filepath)/scrolling-nav.js"></script>
There are many more cool possible snippets you can find. This is really to keep the navbar fixed after the offset of '51'. You can also add the smoothed movement to the webpage section after selecting a menu button.. If you have a onepage website, for example. This would also be js.
Good luck. :)

Scroll large image on menu click

I have a rather large image (not my choice how it was given to me) I have a simple navigation structure and when I click on one of the links I want to be able to scroll to a certain point of the large jpg below the menu. It's one large image so using # isn't going to work. I assume this is going to need to be a javascript or jquery function, but I'm just how sure how to set that up. I've looked around but everything I found is for a slide show, where I just have one overly large image that I need to scroll down and up via a menu button. I tried having the a tag jump around the page, and that kind of worked, but it didn't scroll it just jumped.
I wish I had code to show, but nothing I have used worked.

You can use scrollTop property of element like body or any div to scroll at any position. see here created a pen for the same.

If you are going to animate the page scroll you will probably need to use jQuery's animate function.
$("html, body").animate({
scrollTop: 400 /*Desired offset position*/
}, 1000);
Take a look at this jsFiddle as an example.
You could also position anchors behind the image at the positions you need the page to scroll
See this jsFiddle

Scroll to anchor points only / override scrolling

I wanted to implement a function where the page automatically scrolls to the next anchor point (up or down), similar to this page:
http://www.htc.com/ch-de/smartphones/htc-one-m9/
I already have the page somewhat set up (http://www.cubee.ch/wip) and most things run smoothly, but I could not figure out how to scroll to an anchor without a link/click :(
Thanks for any help!
Simon

There is a lot of plugin to make this. Here is one:
https://github.com/alvarotrigo/fullPage.js

Load scrollable div at bottom

I'm developing a chat in javascript (angularjs without jQuery), and I would like to know if it's possible to load a scrollable div to the bottom.
I'm aware about the scrollTo js property, but in my case it's not satisfying.
First of all it's not a really good user experience to see the div scrolled to the bottom and furthermore I use onscroll (to top) pagination. So if my div is loaded to his top when triggered a scroll a new page will be loaded.
In outline I would something close to facebook chat windows.
If anybody know how to do that in an elegant way, thanks in advance.
EDIT :
Another constraints is that the chat message are loaded asynchronously, so if I only wait for the DOM to be loaded I scroll to the bottom of my empty div

I'm not sure if this is what you're looking for, but if your chat window is a div with overflow: scroll set (like the FB Chat), wouldn't it work if you set the scrollTop property?
This should set the new scrolling position immediately, so you shold not see any transition.
I created a little CodePen to demonstrate it: http://codepen.io/anon/pen/dpkxl

Why not do:
var yourEl= document.getElementById("yourEl");
yourEl.scrollTop = yourEl.scrollHeight;
And call it every time new content is added to the div (yourEl) in question?

you can use this for scrolling a div to bottom
$("element").animate({scrollTop : $("element").height()},1);

Based Arjun's answer, but using scrollHeight
$("element").animate({scrollTop : $("element")[0].scrollHeight},1);
will scroll to the [non currently visible] bottom of the element (div/ul/...)

AJAX Horizontal Scrolling with scrollbar

I need to create something like this site, I found many jQuery infinite scrolling scripts that allow you to load contents using AJAX while you're scrolling. What I need is very similar, except I want it to be horizontal and I want to set the size of the scroll bar according to the amount of contents I have. If you check out this website you'll see that you can jump from page one to page lets say 3 without loading the second page. Any idea how they do that ? their scroll bar is draggable too ! This is exactly what I need but don't know how. Any help is appreciated.

jQuery lazyload works with horizontal scrolling too.
Look at this example that I created here.
The site you are linking to is not a "horizontal scrolling" page. That's actually pagination not scrolling. If you want to do pagination then you don't need any plug in at all. Just call your AJAX when page or tab link clicked.