I have a div.scroll_fixed with the following CSS
.scroll_fixed {
position:absolute
top:210px
}
.scroll_fixed.fixed {
position:fixed;
top:0;
}
I'm using the following jQuery code to set the .fixed class when the div reaches the top of the page.
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
$('.scroll_fixed').addClass('fixed');
} else {
// otherwise remove it
$('.scroll_fixed').removeClass('fixed');
}
});
This works great for the vertical scroll fixing. But with a small browser window, horizontal scrolling causes a clash with content to the right of this fixed div.
I would like the div to scroll with the content horizontally.
Could anyone point me in the right direction. Still getting my feet wet with JS/JQuery.
I basically want it to work like the second box in this example.
The demo is keeping the element's position:fixed and manipulating the left property of the element:
var leftInit = $(".scroll_fixed").offset().left;
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));
$(window).scroll(function(event) {
var x = 0 - $(this).scrollLeft();
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
$('.scroll_fixed').addClass('fixed');
} else {
// otherwise remove it
$('.scroll_fixed').removeClass('fixed');
}
$(".scroll_fixed").offset({
left: x + leftInit
});
});
Using leftInit takes a possible left margin into account. Try it out here: http://jsfiddle.net/F7Bme/
You have probably moved on by now, but here is an answer for anyone else looking for a horizontally scrollable fixed element solution. This jquery plugin was created to solve this exact problem.
This demo uses a shopping cart summary that will still scroll horizontally when fixed to the top of the page; and, I have also used it for a header above tabular data:
Demo: http://jsfiddle.net/y3qV5/434/ (updated)
Plugin and source: https://github.com/bigspotteddog/ScrollToFixed
Usage:
$(document).ready(function() {
$('#cart').scrollToFixed( { marginTop: 10 } );
});
use css property position:sticky to get it.
Here is the article explained and live demo.
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
the only drawback is browser compatibility.