Develop Reference

Choppy jQuery Scrolling in Firefox

I have a small snippet of jQuery that I'm using to move my nav bar when the user scrolls then have it stick 75px from the top of the page.
In IE9 the scrolling is super smooth, but in Firefox it's very jerky and choppy.
Here's my code:
jquery:
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
$('div.hnav').css('margin-top',Math.max(-235,0-scrollTop));
});
css:
div.hnav {
position: fixed;
top: 300px;
height: 40px;
}
Any suggestions?

Don't use margin-top. Changing the margin values often causes reflow. Why not just use top, as you've already got that set up to be positioned anyway?

I've found often the solution is to let the scrolling be handled by the GPU. One way you can force this to happen is by adding
webkit-transform:translate3d(0,0,0)
to the element you are scrolling. You can see what is being handled by the GPU vs CPU by opening the page in Chrome->Developer Tools->General and selecting "Force accelerated compisiting" and "Show composited layer borders". That will cause an orange border to appear around anything being handled by the GPU.

I suggest you use this approach instead: http://jsfiddle.net/Uxn9f/
Updated CSS
div.hnav {
position: absolute;
top: 300px;
height: 40px;
}
Swapped from fixed to absolute positioning. This allows the element to move with the scroll of the page.
Changed JQuery
$(window).scroll(function () {
if ($(this).scrollTop() > 235) {
$('div.hnav').css({
'position': 'fixed',
'top': 75
})
} else {
$('div.hnav').css({
'position': 'absolute',
'top': 300
})
}
});
Essentially what we're doing is checking the current scroll of the page. When we reach a certain point (235px) we will "lock" the .hnav to be 75px from the top of the viewport by changing its positioning (type and dimension).
If the user scrolls back up past out magic 235px mark, reset the positioning.

position:fixed floating menu confined to scroll position

I've got a menu which I want to stay in the same position on the page with css:
position:fixed;
top: 0;
But I want the menu to not go outside of a certain area when the page scrolls. Please see this example (scroll the result window).
http://jsfiddle.net/Fg2MA/1/
Can this be done with just CSS, or can someone suggest an elegant JS solution to this?
Many thanks.

I think it will not work without java script (or maybe very tricky css trick?), but if you have the option to use JQuery, the solution is quite simple, just do:
$(document).on('scroll', function () {
if ($(document).scrollTop() > ($("#container")[0].offsetTop + $("#container").height())) {
$("#menu").css({
display: "none",
});
}
else {
$("#menu").css({
display: "block",
});
}
});
In the condition, it checks if the actual scrolling position is under the beginning of the container. If yes, the css of the #menu is changed to display: none; otherwise to display: block;
See Fiddle: http://jsfiddle.net/Fg2MA/3/

CSS how to fix an element to scroll horizontally with the page but not vertically?

I have created an example to help explain. http://jsfiddle.net/9AUbj/1/
<style>
div#one {}
div#two {
height: 50px;
background-color: blue;
width: 1000px;
}
div#three {
height: 1000px;
}
</style>
...
<div id="one">Hello World!</div>
<div id="two"></div>
<div id="three"></div>
I would like "Hello World!" to move horizontally with the window when the user scrolls horizontally. But I DON'T want it to move vertically with the window when the user scrolls vertically. What is the best way to do this? I'm using Bootstrap and jQuery UI, in case those might help. However, I am also interested in a pure CSS solution.
Thanks in advance :-)
ktm

Whenever you scroll the window, reposition the #one element to always be on screen. Also, #one should be position: absolute.
$(window).scroll(function () {
$("#one").css({
left: $(this).scrollLeft()
});
});
Here's your fiddle with the new code: http://jsfiddle.net/9AUbj/15/

While I admit that a CSS-only solution would be cool, you can't apply positioning based on axis. With how fixed positioning works, you can't force a horizontal scroll on the document even if the fixed-position element extends outside.
However, this is very simple to do with jQuery
$(document).on('scroll', function () {
$("#two").css('top', $(this).scrollTop());
});
This requires #two to be absolutely positioned.
http://jsfiddle.net/9AUbj/16/

i used this code
$(window).scroll(function () {
$("#one").css({
left: $(this).scrollLeft()
});
});
and it works perfect on Chrome , but on internet explorer when i drag the horizontal scroll, the fixed content starts to flicker :(

How to create an animated menu, with smoothscroll pane similar to chart.io and simple.com

I'm trying to create a 1 page website that has a menu across the top in a similar style to chart.io or simple.com, can anyone point me in the direction of a good tutorial? I've searched using google but I've not managed to come up with anything that does something like what I'm trying to do.
I currently have Mootools smooth scroll doing the scroll however I'm having trouble animating the element under the menu item.
Any and all help is greatly appreciated...

Start making the header menu fixed using CSS:
#header {
position: fixed;
top: 0;
left: 0;
}
Then you can use a Mootools plugin like this one:
http://davidwalsh.name/mootools-scrollspy
Demo: http://davidwalsh.name/dw-content/scroll-spy.php?page=3
As you can see, with this plugin you can easily get the scroll position, so you can place the triangle under the menu in the correct position.
To animate the triangle, you just need some basic tween animation. HTML will be something like this:
<div id="header">
Your header here
<div id="triangle">
<img src="triangle.png" alt="">
</div>
</div>
CSS:
#header #triangle {
position: absolute;
bottom: 0;
left: 0;
}
Mootools tween for animation, this will move the triangle smoothly from it's current position to 300px from the left:
$('triangle').tween('left', 300);
Hope this will help you!

Disable horizontal scroll with JavaScript

Does anyone know if there is a way to disable the horizontal scrollbar using JavaScript?
I don't want to use overflow-x: hidden;.

Without using the perfectly workable overflow-x CSS property, you could resize the content to not require a scroll bar, through javascript or through HTML/CSS design.
You could also do this:
window.onscroll = function () {
window.scrollTo(0,0);
}
... which will detect any scrolling and automatically return the scroll to the top/left. It bears mentioning that doing something like this is sure to frustrate your users.
You're best served by creating an environment where unwanted UI elements are not present at all (through the CSS, through design). The approach mentioned above shows unnecessary UI elements (scroll bars) and then causes them to not work in a way that the user expects (scroll the page). You've "broken a contract" with the user - how can they trust that the rest of your web site or application will do expected things when the user makes a familiar action?

A way to prevent elements from scrolling down in jQuery:
$(element).scroll(function () {
this.scrollTop = 0;
this.scrollLeft = 0;
});
Well, this does not actually prevent the scrolling, but it "scrolls back" to the top-left corner of an element, similar to Chris' solution which was created for the window instead of single elements. Remove the scrollTop or scrollLeft lines to suit your needs.

A dirty trick would be overlapping the scrollbars: http://jsfiddle.net/dJqgf/.
var overlap = $('<div id=b>');
$("#a").wrap($('<div>'));
$("#a").parent().append(overlap);
with:
#a {
width: 100px;
height: 200px;
overflow-x: scroll;
}
#b {
position: relative;
left: 0;
bottom: 20px;
width: 100%;
height: 20px;
background-color: white;
}