I have an element that is position:fixed and so scrolls with the page how i want it to however. when the user scrolls up I want the element to stop scrolling at a certain point, say when it is 250px from the top of the page, is this possible? Any help or advice would be helpful thanks!
I had a feeling that I would need to use jquery to do so. I tried getting the scrolling or location of the where the user is but got really confused, is there any jquery solutions?
This question is related to
jquery
css
positioning
A Solution using Mootools Framework.
http://mootools.net/docs/more/Fx/Fx.Scroll
Get Position(x & y) of the element where you want to stop the scroll using $('myElement').getPosition().x
$('myElement').getPosition().y
For a animation sort of scroll use :
new Fx.Scroll('scrollDivId', {offset: {x: 24,y: 432} }).toTop();
To just set scroll immediately use :
new Fx.Scroll(myElement).set(x,y);
Hope this Helps !! :D
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 a position relative container in Adobe Muse.
My solution:
$(window).scroll(function(){
if($(this).scrollTop()>425) {
$("#theRelative").css("margin-top",$(this).scrollTop()-425);
}
});
You can do what James Montagne did with his code in his answer, but that will make it flicker in Chrome (tested in V19).
You can fix that if you put "margin-top" instead of "top". Don't really know why it works with margin tho.
$(window).scroll(function(){
$("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});
Do you mean sort of like this?
$(window).scroll(function(){
$("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});
$(window).scroll(function(){_x000D_
$("#theFixed").css("top", Math.max(0, 100 - $(this).scrollTop()));_x000D_
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
_x000D_
<div id="theFixed" style="position:fixed;top:100px;background-color:red">SOMETHING</div>_x000D_
_x000D_
<!-- random filler to allow for scrolling -->_x000D_
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>In a project, I actually have some heading fixed to the bottom of the screen on page load (it's a drawing app so the heading is at the bottom to give maximum space to the canvas element on wide viewport).
I needed the heading to become 'absolute' when it reaches the footer on scroll, since I don't want the heading over the footer (heading colour is same as footer background colour).
I took the oldest response on here (edited by Gearge Millo) and that code snippet worked for my use-case. With some playing around I got this working. Now the fixed heading sits beautifully above the footer once it reaches the footer.
Just thought I'd share my use-case and how it worked, and say thank you! The app: 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);
}
I wrote a blog post about this that featured this function:
$.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();
});
};
Here is a 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 to the top of the page, if the element would have scrolled out of view, vertically; however, it does allow the element to continue to move left or right with the horizontal scroll.
Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down past the target 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.
Usage for your particular 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 });
});
I adapted @mVchr's answer and inverted it to use for sticky ad positioning: if you need it absolutely positioned (scrolling) until the header junk is off screen but then need it to stay fixied/visible on 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;
}
Just 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);
A possible CSS ONLY solution can be achived with position: sticky;
The browser support is actually really good: https://caniuse.com/#search=position%3A%20sticky
here is an example: https://jsfiddle.net/0vcoa43L/7/
my solution
$(window).scroll(function(){
if($(this).scrollTop()>425) {
$("#theRelative").css("margin-top",$(this).scrollTop()-425);
} else {
$("#theRelative").css("margin-top",$(this).scrollTop()-0);
}
});
});
I loved @james answer but I was looking for its inverse i.e. stop fixed position right before footer, here 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 would stop right before footer. and will not overlap with it.
Source: Stackoverflow.com