CSS How to fix element position after some scroll without using jquery


Tags: javascript,html,css

Problem :

I want an element of my websites's sidebar to be fixed after some scrolling. The functionality i'm searching is the same used by 9gag website here: http://9gag.com/gag/abq3PbX?ref=fsidebar (specifically the last square ads that is fixed when you scroll down the page from some point). How can i do the same without using jquery or other external libraries, but using css/javascript only?



Solution :

I've done by switching between 'fixed' and 'absolute' regarding the document's body scrollTop.

function scrollFunction() {
    var scrollPos = document.body.scrollTop;

    if (scrollPos > 40) {
        document.getElementById("fixed-floater").style.position = "fixed";
        document.getElementById("fixed-floater").style.top = "0px";
    } else {
        document.getElementById("fixed-floater").style.position = "absolute";
        document.getElementById("fixed-floater").style.top = "40px";
    }
}

window.onscroll = scrollFunction;

http://jsfiddle.net/ua4fhrzy/1/

But you might consider looking into "sticky css"


    CSS Howto..

    Wordpress nav menu images not showing up in mobile safari

    How to fixed image on every screen resolution?

    How to refer to an id with special characters in CSS

    How to add an image to xml sheet using css

    how to make observable a css class with knockout js

    How to create a wrapper with different angles in CSS

    How to get this hover effect with just CSS

    How can i align the text in center of a row in css?

    How to use jQuery for hover effects

    HTML + CSS layout with bottom box showing all content, variable height top box with scroll

    How to combine HTML, CSS, and Javascript into an HTML code

    How to make equal space between boxes in one row via CSS

    How to run a Javascript function on an iframe before the source (src) is loaded?

    Having css issues div ahref showing up behind others, domino effect

    How to achieve this awesome CSS animation

    Show header when at top of page - Scroll event re-firing issue

    how to add a css class to a list when the particular li is clicked using jquery?

    js Find Class Within Div + toggle CSS/Hide One Show Other

    Does anyone know how to create this 3d flip animation via CSS?

    how to 'split' a css attribute/value using Jquery

    How to have fluid height in css?

    How to Display a div at same position on a any display irrespective of physical dimensions

    How can I fill a fixed-size
    with a variable-size

    ?

    CSS Divs overlapping, how do I force one above the other?

    How to include css font in Firefox and internet explorer?

    How to refactor CSS based on HTML class

    How to hide a column in the Webgrid in aspasp.net MVC?

    How to rotate an element and correctly position it with CSS or jQuery

    How to pick with css multiple select tags that has at least one option selected?

    how to remove one canvas element from displaying on top of another canvas element