div container following scroll of screen


I'd like to set up a "backward-compatible" scrolling sidebar on one of my pages.

I have a page containing information about a species of fish which can be extraordinarily long and images to accompany it.

The images are in the right-hand pane at the moment and I'd like them to follow the user as they scroll to the bottom of the page.

I've used the following code with some success:

jQuery().ready(function($) { var $scrollingDiv = $("#sidebar"); $(window).scroll(function(){ $scrollingDiv .stop() .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" ); }); });

But it jumps too far when scrolling down.

<em>(original position)</em>

<img alt="SIDEBAR - ORIGINAL POSITION" class="b-lazy" data-src="https://i.stack.imgur.com/niXQd.png" data-original="https://i.stack.imgur.com/niXQd.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

<em>(scrolled a single mousewheel click)</em>

<img alt="SIDEBAR - SCROLLED POSITION" class="b-lazy" data-src="https://i.stack.imgur.com/v6vwT.png" data-original="https://i.stack.imgur.com/v6vwT.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

When you start scrolling down the page, the sidebar appears around half-way down and as such you can only see two of the images.

<strong>Once a user scrolls past X point (say 400px), I would like the sidebar to start moving with the page</strong>. However, it also needs to go back to its original position when the user reaches the top of the page once more.

Is there a fix that can be applied to this code, or a better way of approaching this?


<strong>EDIT: position:fixed Problem</strong>

When I try to apply position:fixed as per Josh and David's suggestions (either bit of JS code), this happens:

<img alt="Sidebar with FIXED positioning" class="b-lazy" data-src="https://i.stack.imgur.com/1IyZm.png" data-original="https://i.stack.imgur.com/1IyZm.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

Here is Firebug's read-out of the CSS styles attached to this element:

<img alt="Sidebar with FIXED positioning CSS" class="b-lazy" data-src="https://i.stack.imgur.com/r2kiP.png" data-original="https://i.stack.imgur.com/r2kiP.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />


You can use a plugin for this, but it’s such a simple task that you might as well do it on your own.

Consider this simple markup:

<div id="content">Content</div> <div id="sidebar"><div>Sidebar</div></div>

And this would be all the javascript you need:

var el = $('#sidebar'), pos = el.position().top; $(window).scroll(function() { el.toggleClass('fixed', $(this).scrollTop() >= pos); });

Now, it will add a class to the #sidebar div as soon as the user scroll further than the sidebar is positioned, so all you need now is som CSS. I’m applying the fixed positioning to a child element to avoid layout problems:

#sidebar.fixed > div{position:fixed;}

I put up a really simple demo here: <a href="http://jsfiddle.net/QZyH3/" rel="nofollow">http://jsfiddle.net/QZyH3/</a>


You should try the jQuery code found in <strong><a href="http://jqueryfordesigners.com/fixed-floating-elements/" rel="nofollow">this tutorial</a></strong>, which replicates Apple's shopping cart sidebar. It has a working demo and a very small code footprint.


why not use css position: fixed; property? of course if you don't mind the div being not smooth but straightly following your scrollTop. I've found it not working only in IE6-- by today, so using fixed position is a good solution I think, otherwise you just get with window.scrollTop of DOM and assign it to your element's absolute position top


  • Single function call on scroll event?
  • Rotating Images & Pixel Collision Detection
  • Custom header layout for React Native
  • Adding mousewheel to Sencha Desktop App
  • XYPlot (AndroidPlot library) in ScrollView does not appear
  • Android animation while switching imageview resource
  • fancyBox v2: How do I prevent background scrolling in Chrome?
  • Jquery Smoothscroll Function - How to Control Animation Speed?
  • UIScrollView not scrolling programmatically in iOS 6 & 7 both
  • React native: children view cannot go beyond parent view on Android but it is working on iOS
  • 'cannot call methods on tooltip prior to initialization' error when I add the jquery-ui li
  • JQuery animation: Is it possible to change speed during the animation?
  • SpriteKit screenshot of view off screen
  • TableView scroll underlying top bar
  • HTML5 canvas draw multiple rectangles that move in the canvas
  • AJAX Chat Box Scrolling Up Issue
  • Difficult to stop infinite CSS animation in Android browser
  • Translate animation to correct position in Android
  • Making header act like google chrome mobile app address bar
  • Find group of records that match multiple values
  • How to autopopulate a field in SugarCRM form
  • Differences in dis-assembled C code of GCC and Borland?
  • Position: fixed nav does not stay fixed
  • Blackberry - Custom EditField Cursor
  • Body moving without any force applied? (Box2d)
  • Get one-time binding to work for ng-if
  • Debugging ASP.NET on a built-in web server suddenly stops
  • Sails.js/waterline: Executing waterline queries in toJSON function of a model?
  • Is there any way to access browser form field suggestions from JavaScript?
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Redux, normalised entities and lodash merge
  • jquery mobile loadPage not working
  • Do create extension work in single-user mode in postgres?
  • Data Validation Drop Down Box Arrow Disappearing
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • python regex in pyparsing
  • How do you join a server to an Active Directory (domain)?
  • Android Google Maps API OnLocationChanged only called once
  • How can I use threading to 'tick' a timer to be accessed by other threads?