I found this script:
$(function(){
var btn = $('.social');
var btnPosTop = btn.offset().top;
var win = $(window);
win.scroll(function(e){
var scrollTop = win.scrollTop();
if(scrollTop >= btnPosTop){
btn.css({position:'fixed',left:'82%'});
}else if(btn.css('position') === 'fixed'){
btn.css({position:'',left:''});
}
});
});
Which works great. I changed the original field to '.social' so that it would work with my code.
I am not looking for a crap fix of "left: 82%" though. I want to avoid the position: fixed; and simply scroll the div where it sits.
My tree is #container .contain .single-content .social
The position: fixed is my main problem, but if you know, then stopping .social once it reaches the very bottom of .single-content would be a major plus!!
Hopefully I have provided enough information.
HTML:
<div id='container'>
<div class='contain'>
<div class='single-content'>
<div class='first'>
<div class='social'>
content here.. no p tags.. just facebook, twitter buttons etc.
</div>
</div>
</div>
</div>
</div><!-- container -->
EDIT: website in question: thelackof.com
You can see how the social icons are offset a bit because of my left:82% If I remove the left:, then the new position: fixed will jump my div out of the containing div and all the way to the left of the next containing div.
I would like it to stay where it is and scroll down once reached.
EDIT no. 2: First of all:
So it will get a value that won't disturb with the main-contents:
#container .contain .single-content .first .social {
float: left;
position: absolute;
width: 15%;
right: 0;
}
Then this:
$(function(){
var btn = $('.social');
var btnPosTop = btn.offset().top;
var win = $(window);
win.scroll(function(e){
var scrollTop = win.scrollTop();
if(scrollTop >= btnPosTop){
btn.css({position:'fixed'});
}else if(btn.css('position') === 'fixed'){
btn.css({position:''});}
if (btnPosTop >= $('.single-content').offset().top-92){
btn.css({position:''});
}
});
});
I might be getting your question wrong but I think this is what you asked for. I removed the left property.
Hope it helps :)
EDIT: I've added:
if (btnPosTop >= $('.single-content').offset().top){
btn.css({position:''});
}
So it will scroll until the btnPosTop is greater than the offset().top of .single-content
Please let me know if it works
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments