How to keep a jQuery function from moving elements all the way to the left?
I was able to implement the posted solution here ("position: fixed and absolute at the same time. HOW?") To get the div element to move with the rest of the page horizontally, but stay stationary vertically. However, this solution causes the selected item to move ALL as to the left of the page (with what appears to be a 20px mark). I'm still new to javascript and jQuery, but as I understand it the following is:
$(window).scroll(function(){
var $this = $(this);
$('#homeheader').css('left', 20 - $this.scrollLeft());});
takes the selected element and, after scrolling by the user, affects the CSS of the element so that its position to the left becomes some function of the current position of the scrollbar, adjusted to the edge of 20 pixels. If this is correct? And if so, can anyone think of a way that I could modify it so that instead of moving the selected element all the way to the left, we only move it as far as my default CSS position for HTML document body elements (shown below )?
body {font-size:100%;
width: 800px;
margin-top: 0px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;}
EDIT: Here's a jsfiddle (code here ) I did to illustrate this question. My page is designed so that when it is displayed in full screen or near full mode, the #homeheader element is displayed horizontally centered due to its width, and the left and right margins are set to auto. As the page gets smaller and smaller, the margins also take effect until they disappear completely and are replaced with the padding-left and padding-right 20px settings. So at this point (when the window is small enough for the margins to disappear altogether), as shown by jsfiddle, the code works as intended, but when the window is full size, JS overrides the CSS and pushes the div element entirely to the left (getting rid of the margin) on any scrolling.
source to share
There are two events that need to be handled to get this to work correctly. First, there is a scroll event that you are pretty close to. The only thing you might want to do is use offset to get the current value of the left position based on the document.
Another event not yet handled is the resize event . If you fail to handle this, then once the left position is defined, your element (title) will always exist regardless of whether the user changes the window.
Basically, something like this should work:
var headeroffset;
var header = $('#homeheader');
// handle scroll
$(window).scroll(function() {
// auto when not defined
if (headeroffset === undefined) {
// capture offset for current screen size
headeroffset = header.offset();
}
// calculate offset
var leftOffset = headeroffset.left - $(this).scrollLeft();
// set left offset
header.css('left', leftOffset);
});
// handle resize
$(window).resize(function() {
// remove left setting
// (this stops the element from being stuck after a resize event
if (header.css('left') !== 'auto') {
header.css('left', '');
headeroffset = undefined;
}
});
JSFiddle example: http://jsfiddle.net/infiniteloops/ELCq7/6/
http://jsfiddle.net/infiniteloops/ELCq7/6/show
This type of effect can be done exclusively in css, however I would suggest taking a look at the full screen series of apps that Steve Sanderson did recently.
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
As an example, you can do something like this:
source to share