Stop scrolling a fixed position at a particular moment?

Question

I have an element that is a position: fixed, and therefore scrolls the page the way I want it. when the user scrolls, I want the element to stop scrolling to a specific point, say when it is 250 pixels from the top of the page, is this possible? Any help or advice would be helpful!

I had the feeling that I would need to use jquery for this. I tried to get the scroll or location of where the user is, but really confused, are there any jquery solutions?

Answer 1

Here is a quick jQuery plugin I just wrote that can do what you need:

$.fn.followTo = function (pos) { var $this = this, $window = $(window); $window.scroll(function (e) { if ($window.scrollTop() > pos) { $this.css({ position: 'absolute', top: pos }); } else { $this.css({ position: 'fixed', top: 0 }); } }); }; $('#yourDiv').followTo(250); 

See working example →

Answer 2

Do you mean like this?

http://jsfiddle.net/b43hj/

 $(window).scroll(function(){ $("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop())); }); 

 $(window).scroll(function(){ $("#theFixed").css("top", Math.max(0, 100 - $(this).scrollTop())); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="theFixed" style="position:fixed;top:100px;background-color:red">SOMETHING</div> <!-- random filler to allow for scrolling --> STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR> 

Answer 3

Here is the complete jquery plugin that solves this problem:

https://github.com/bigspotteddog/ScrollToFixed

The description of this plugin is as follows:

This plugin is used to fix elements at the top of the page if the element scrolls out of view, vertically; however, it allows the item to continue to move left or right by scrolling horizontally.

Given the marginTop parameter, the element will stop moving vertically up as soon as the vertical scroll reaches the target position; but the item will still move horizontally as the page scrolls left or right. When the page is scrolled back to the final position, the element will be restored to its original position on the page.

This plugin has been tested in Firefox 3/4, Google Chrome 10/11, Safari 5, and Internet Explorer 8/9.

Use for your specific case:

 <script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script> $(document).ready(function() { $('#mydiv').scrollToFixed({ marginTop: 250 }); }); 

Answer 4

You can do what James Montagne did with his code in his answer, but that will make it flicker in Chrome (tested on V19).

You can fix this by using margin-top instead of top. I don't know why this works with margin tho.

 $(window).scroll(function(){ $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop())); }); 

http://jsbin.com/idacel

Answer 5

In the project, I actually have some title attached to the bottom of the screen when the page loads (this is a drawing application, so the title is at the bottom to provide maximum space for the canvas element on the wide screen).

I need the header to become “absolute” when it reaches the footer in the scroll, since I don't want the header above the footer (the course color was the same as the background color of the footer).

I took the oldest answer here (edited by Gearge Millo) and this piece of code worked for my use. With some games I got this job. Now the fixed header is perfectly positioned above the footer when it reaches the footer.

Just thought that I would share my precedent and how it works, and say thank you! Application: http://joefalconer.com/web_projects/drawingapp/index.html

  /* CSS */ @media screen and (min-width: 1100px) { #heading { height: 80px; width: 100%; position: absolute; /* heading is 'absolute' on page load. DOESN'T WORK if I have this on 'fixed' */ bottom: 0; } } // jQuery // Stop the fixed heading from scrolling over the footer $.fn.followTo = function (pos) { var $this = this, $window = $(window); $window.scroll(function (e) { if ($window.scrollTop() > pos) { $this.css( { position: 'absolute', bottom: '-180px' } ); } else { $this.css( { position: 'fixed', bottom: '0' } ); } }); }; // This behaviour is only needed for wide view ports if ( $('#heading').css("position") === "absolute" ) { $('#heading').followTo(180); } 

Answer 6

I wrote a blog post about this in which this function was pointed out:

 $.fn.myFixture = function (settings) { return this.each(function () { // default css declaration var elem = $(this).css('position', 'fixed'); var setPosition = function () { var top = 0; // get no of pixels hidden above the the window var scrollTop = $(window).scrollTop(); // get elements distance from top of window var topBuffer = ((settings.topBoundary || 0) - scrollTop); // update position if required if (topBuffer >= 0) { top += topBuffer } elem.css('top', top); }; $(window).bind('scroll', setPosition); setPosition(); }); }; 

Answer 7

my decision

 $(window).scroll(function(){ if($(this).scrollTop()>425) { $("#theRelative").css("margin-top",$(this).scrollTop()-425); } else { $("#theRelative").css("margin-top",$(this).scrollTop()-0); } }); }); 

Answer 8

Solution using the Mootools Framework.

http://mootools.net/docs/more/Fx/Fx.Scroll

• Get the position (x and y) of the element where you want to stop scrolling using $ ('myElement'). getPosition (). x

  $ ('MyElement'). GetPosition (). At

• To animate a scroll type, use:

  new Fx.Scroll ('scrollDivId', {offset: {x: 24, y: 432}}). toTop ();

• To simply set the scroll, use immediately:

  new Fx.Scroll (myElement) .set (x, y);

Hope this helps !: D

Answer 9

I liked this solution.

 $(window).scroll(function(){ $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop())); }); 

My problem was that I had to deal with the container relative position in Adobe Muse.

My decision:

 $(window).scroll(function(){ if($(this).scrollTop()>425) { $("#theRelative").css("margin-top",$(this).scrollTop()-425); } }); 

Answer 10

Simply improvised mVChr code

 $(".sidebar").css('position', 'fixed') var windw = this; $.fn.followTo = function(pos) { var $this = this, $window = $(windw); $window.scroll(function(e) { if ($window.scrollTop() > pos) { topPos = pos + $($this).height(); $this.css({ position: 'absolute', top: topPos }); } else { $this.css({ position: 'fixed', top: 250 //set your value }); } }); }; var height = $("body").height() - $("#footer").height() ; $('.sidebar').followTo(height); $('.sidebar').scrollTo($('html').offset().top); 

Answer 11

I adapted the @mVchr answer and turned it over to use it for positive positioning of the advertisement: if you need to absolutely position (scroll) it until the title is disconnected from the screen, but then it will need to remain attached / visible on the screen after that :

 $.fn.followTo = function (pos) { var stickyAd = $(this), theWindow = $(window); $(window).scroll(function (e) { if ($(window).scrollTop() > pos) { stickyAd.css({'position': 'fixed','top': '0'}); } else { stickyAd.css({'position': 'absolute','top': pos}); } }); }; $('#sticky-ad').followTo(740); 

CSS

 #sticky-ad { float: left; display: block; position: absolute; top: 740px; left: -664px; margin-left: 50%; z-index: 9999; } 

Answer 12

I liked @james answer, but I was looking for the opposite, i.e. I stopped a fixed position right in front of the footer, this is what I came up with

 var $fixed_element = $(".some_element") if($fixed_element.length){ var $offset = $(".footer").position().top, $wh = $(window).innerHeight(), $diff = $offset - $wh, $scrolled = $(window).scrollTop(); $fixed_element.css("bottom", Math.max(0, $scrolled-$diff)); } 

So now the fixed element will stop right in front of the footer. and will not overlap with it.

Answer 13

A possible CSS-only solution can be achieved with position: sticky;

Browser support is really good: https://caniuse.com/#search=position%3A%20sticky

here is an example: https://jsfiddle.net/0vcoa43L/7/