[Timlinux] JavaScript position supports horizontal scroll bar for fixed

1. Fixed positioning

Position:fixed, when set, the position of the element in the browser window is fixed, this time, whether horizontally moving the scroll bar, or vertical movement of the scroll bar, the element is dead will not move.

But when fixed positioning elements, as the header part of the time, the browser window once reduced, do not move, it will lead to the right side of the navigation can not see also point, such as "Login" button, this time people want to dozens, and then dozens and no eggs.

2. Onscroll Events

The Onscroll event occurred on the Window object when the scroll bar was scrolled. Our approach is to register a function (or functions) on the Window.onscroll event and dynamically update the left value of the element to implement the move function of the fixed element when the event occurs.

3. Initial state

When the page first loads, the browser's scrollbar position has deviated from normal, this time does not have a scrolling event, it is necessary after the document is ready, by the JavaScript code to trigger a onscroll event. There are three steps to triggering an event:

1. Document.createevent (' Events ') returns an event object, such as: EV;
2. Ev.initevents (' scroll ', false, True) initializes the event to Onscroll;
3. The window.dispatchevent (EV) triggers an event on the window element.

4. Example

A relatively simple example is as follows:

 function   Triggerscroll () { var  ev = document.createevent (' Events '  ' scroll ', false , true      = function   () {  Triggerscroll (); }window.onscroll  = function   () {    Span style= "COLOR: #0000ff" >var  leftwidth = Document.body.scrollLeft;  var  fixedelement = document.getElementById (' fixedelement ' ); FixedElement.style.left  = "-" + leftwidth + "px" ;}  

View Code

[Timlinux] JavaScript position supports horizontal scroll bar for fixed