How to make an element slide with the viewport as it scrolls?


Tags: javascript,jquery,css,position

Problem :

I've Googled for this but must be using the wrong keywords.

Basically I want to use the effect that Magento and now Stack Overflow uses. That is, there is an element in a column, and when you scroll down, it sticks to the top of the viewport. And once scrolled up again, it goes back into the normal page flow.

This Ask A Question is a good page for example. Scroll down and watch the "How to Format" element come down (might need to make your viewport smaller if you have a large screen to see the effect).

I've noticed it is setting position: fixed in the CSS. The JavaScript however is obfuscated.

What's the easiest way to achieve this effect? Is there a jQuery plugin available?



Solution :

Here is an article that should help: http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/comment-page-1/


    CSS Howto..

    How to set link visited color in JQuery

    How to call CSS from JavaScript

    How to grab a CSS syntax with JavaScript?

    How to add far-future expires headers to minified cssfiles/scripts?

    How to control child div height of a flex item

    How to access and modify imported .css files in WordPress style.css file?

    How to display a portion of an image with CSS?

    How to bind click event on image added using CSS 'background-image' property in jQuery

    how to make a css gradient stop after so many pixels?

    In LESS, how to rewrite this CSS composition style?

    How to CSS style a table such that cells is at most 30% of screen height and use a scroll bar when it's taller?

    How To Make Entire 'li' Area and Text A Clickable Link

    how to avoid overlapping of text

    How to hide currently selected li item from being an option when user clicks dropdown again?

    How to change elements opacity based on if checkbox is or is not checked with CSS only?

    How do I get the codes of creating the sidebar from this website? [closed]

    How to put div under content when resize window?

    How to use an image as a frame, and scroll inside? Simulating a phone on a website

    how to make an interactive uploader like gmail and facebook have?

    Flex 4 How to set background image to VBox?

    How to get an image from a css animation keyframe to remain on the page after complete [duplicate]

    How to avoid bloating pages with divs?

    How to make my button display two different images once clicked?

    How to use animation with transform CSS

    urls being shown after links when printing web page

    How can I add text to a jQuery slider control?

    How to scroll draw each SVG path one at a time (chronologically)?

    How to make a dynamic html form using css and js

    How to 'append' the background with more styles in CSS?

    How to make a descriptions list inline?