Geek Answers Handbook

Fixed div at the bottom of the page that stops at a given location

I have a fixed div at the bottom of my page that works well. I wonder if there is any simple way to make it “stop” at some place on the page when the user visits it. I want it to stay fixed at the bottom until the user scrolls to a specific place on the page and attaches it to the page and scrolls like the rest of the content. Any suggestions?

+6
javascript html css
source share
3 answers

I tried setting something up on jsfiddle. As I wrote this, I see others posting their alternatives. In case my help is anyway: http://jsfiddle.net/PnUmM/1/

I set the position to relative in CSS, calculated where it is on the document load, to keep the information aside, and then set it to the corrected one.

var sticky_offset; $(document).ready(function() { var original_position_offset = $('#sticky_for_a_while').offset(); sticky_offset = original_position_offset.top; $('#sticky_for_a_while').css('position', 'fixed'); }); $(window).scroll(function () { var sticky_height = $('#sticky_for_a_while').outerHeight(); var where_scroll = $(window).scrollTop(); var window_height = $(window).height(); if((where_scroll + window_height) > sticky_offset) { $('#sticky_for_a_while').css('position', 'relative'); } if((where_scroll + window_height) < (sticky_offset + sticky_height)) { $('#sticky_for_a_while').css('position', 'fixed'); } });
+9
source share

I did this for you: http://jsfiddle.net/XCYFG/1/ .

 $(document).ready(function() { window._div1 = $('#div1'); //selector is expensive window._window = $(window); $(window).scroll(function(e) { _div1.css("top", Math.min(_window.height(), window.scrollY + 100) + _window.height() - _div1.height() - 110); }).scroll(); });
+2
source share

I have a plugin that does the opposite - it is in the stream of a web page, and when the user scrolls it, it is fixed in the viewport. However, it actually applies the css class to the element, so you can use it as is.

You can find the plugin here: https://github.com/hanssonlarsson/jquery-fixedscroll

Then I would suggest you create your element in the stream of your web page:

 <div id="sometimesFixed">content</div>

Using css:

 #sometimesFixed { position: fixed; bottom: 0; } #sometimesFixed.scroll { position: static; }

And apply the plugin like this in your JavaScript:

 $('#sometimesFixed').fixedscroll({className: 'scroll'});

There is also a more general plugin, a very new one called jquery-waypoints. The idea is to associate any code with waypoints, points on a web page where some code is executed when the user scrolls past them.

https://github.com/imakewebthings/jquery-waypoints

It is probably more optimized and better suited than my plugin, but YMMV!

+1
source share

More articles:


All Articles