Develop Reference

Stop fixed div from scroll in a certain point. What is missing in my code? Jquery

I have this div called "floating" and it has to start in the bottom of the screen, but as the user scrolls, it has to move (kindly) to the top and maintain fixed until reaches another div down below.
What I have so far is making the div stops correctly, but it's not moving to the top of the screen when the user start to scroll. What is missing here?
HTML
<div class="container">
<a id="floating" href="#stop"></a>
<div id="dummy">some content</div>
<div id="stop">other content near the footer</div>
<footer>footer</footer>
</div>
CSS
#floating{
display: block;
position: fixed;
bottom: 5%;
right: 5%;
width: 115px;
height: 115px;
color: #fff;
z-index: 1;
background-color: #0055db;
}
JQUERY
function checkOffset() {
var a=$(document).scrollTop()+window.innerHeight;
var b=$('#stop').offset().top;
if (a<b) {
$('#floating').css('bottom', '5%');
} else {
$('#floating').css('bottom', (20+(a-b))+'px');
}
}
$(document).ready(checkOffset);
$(document).scroll(checkOffset);
I appreciate all the help! Thank you!

Try using JQuery Animate
<script>
$(document).ready(function(){
$(document).scroll(function(){
$("#floating").animate({top: '10px'}, "slow");
});
});
</script>

Making a hidden sliding div appear behind link

fiddle
Please see the fiddle above.
There is a link which when clicked a hidden div slides out from the right.
The hidden div contains an image.
At the moment the hidden div slides out but appears at a distance from the 'contact' link, and then when it slides back it disappears before it slides behind 'contact'.
I want it to appear to slide out form behind 'contact' and back in behind 'contact' without any overlapping.
$('#contact').click(function () {
$('#contact-info').animate({width: 'toggle'});
});

You can do like:
var move = 80;
$('#contact').click(function () {
move = move===80 ? 160 : 80;
$('#contact-info').animate({right: move, width: 'toggle' });
});
Check Fiddle

Animate the right property as well.
$('#contact').click(function () {
var right = '160px';
if ($('#contact-info').is(":visible")) {
right = '38px';
}
$('#contact-info').animate({width: 'toggle', right: right});
});
http://jsfiddle.net/RichAyotte/cs23vzjv/1/

I found a way to do this by simply adjusting the css. fiddle
#contact {
background-color: #ffffff;
bottom: 34px;
padding-right: 38px;
position: fixed;
right: 0;
z-index: 1;
}
#contact-info {
bottom: 34px;
margin-right: -250px;
position: fixed;
right: 444px;
text-transform: lowercase;
white-space: nowrap;
}

Fixed secondary Nav bar after scrolling

I was looking through some of the posts and I found most my answer however it's still not working properly for me.
http://jsfiddle.net/5n5MA/619/
The bar you see on the jsfiddle should be catching lower than the top because there is a fixed header that will be there on my main site this secondary bar is supposed to go below it. I can get it to be fixed on jsfiddle but not on my site. And as you can see it is shrinking when it changes to fixed.
HTML:
<header>
<img class="logo" src="images/headerLogo.png">
<p class="about lighter">ABOUT US</p>
<p class="contact lighter">CONTACT US</p>
<img class="getStarted" src="images/getStarted.png">
</header>
<div class="mainSection1">
<h1>SAVE TIME & MONEY</h1>
<h2 class="lighter">CONCIERGE HAS ALL THE ANSWERS</h2>
<p>$79.99 VALUE<br>FREE FOR YOUR CLIENTS</p>
<img class="getStarted" src="images/getStarted.png">
</div>
<div class="subBar">
<p class="first">VALUE</p> <p class="second">SERVICES</p> <p class="third">BRANDS</p> <p class="fourth">HOW IT WORKS</p>
</div>
JS:
var nav = $('.subBar');
if (nav.length) {
var fixmeTop = nav.offset().top -100;
$(window).scroll(function () {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
$('.subBar').css({
position: 'fixed',
width: '100%',
top: '73px',
left: '0'
});
$('header').css(
'box-shadow', 'inherit'
);
} else {
$('.subBar').css({
position: 'static'
});
$('header').css(
'box-shadow', '0px 5px 9px #515151'
);
}
});
}
css:
.subBar {
background: #F1F1F2;
height: 65px;
}
.subBar p:first-child {
margin-left: 15%;
border-left: 1px solid #bbbdc0;
}
.subBar p {
float: left;
border-right: 1px solid #bbbdc0;
width: 17%;
text-align: center;
height: 44px;
margin-top: 0px;
padding-top: 21px;
font-weight: lighter;
}

This is because the div .subBar is not given any width.
Because of this it's width get shrinked when it's position becomes fixed, taking it to be auto by default.
So specify a fixed width. It will take that width in any position.
Also, you need to have some margin on left and right so that it stays the same as you want.
You can make the following changes:
.subBar {
background: #F1F1F2;
height: 65px;
width:100%;
}
Another more accurate solution:
Change in the jquery
if (currentScroll >= fixmeTop) {
$('.subBar').css({
position: 'fixed',
top: '72px'
});
} else {
$('.subBar').css({
position: 'static',
width:'auto';
});
}
Check the FIDDLE.

Issue has been solved! I decided to make a second navbar that starts hidden than is shown when I scroll down enough. It seems to be way less jumpy and isn't taking the original bar out of the dom (which messes with other elements below it).

how can i use position bottom to animate a div to the top of page

I currently am trying to animate the position of a div in a 3 tier structure, the first tier shows only the header, the second the header and excerpt and then the 3rd some additional copy. At the moment I can animate position bottom for both tier 1 and tier 2 but cant seem to figure out how I animate the tier 3 to what would ideally be top:0 which I dont think I can do. Can anyone offer any advice on how this can be achieved?
JS
more.on('click', function(e){
if( body.hasClass('tier1') ){
body.removeClass('tier1').addClass('tier2');
wrapper.delay(500).animate({ bottom: wrapper.data('tier2') }, 400, function(){
//show close
close.show();
});
} else if ( body.hasClass('tier2') ){
body.removeClass('tier2').addClass('tier3');
wrapper.delay(1500).animate({ bottom: '300' }, 500, function(){ // show be top of window
// hide read more
more.hide();
// hide .excerpt + show .upper
excerpt.fadeOut(function(){
upper.fadeIn();
});
});
}
e.preventDefault();
});
Link to current build: http://bit.ly/IA65Mb
Kyle

Check this http://jsfiddle.net/d3eLE/6/
HTML
<div id="wrap">
<a id="me">Click me</a>
</div>
CSS
#wrap {
position: absolute;
bottom: 0;
width: 400px;
height: 50px;
background: #ff0;
}
#me {
border: 1px #000 solid;
background: #0f0;
}
Jquery
$("#me").click(function(){
$("#wrap").animate({
bottom: ( $(window).height() - $("#wrap").height() )
}, 2000);
});
Instead of using bottom, you could make use of top.
$("#wrap").removeAttr("bottom").animate({
top: 0
}, 2000);

Bar fixed on top, but only if the scroll tries to hide it

I have a menu on the highest zone of my web, but not on the top. I want that when the user scrolls the page it stays on the top, but only when it would disapear instead. If the title is visible i want the menu under it, on an apparent static position.
Is it possible without javascript, only with css? I see it on a website, but I don't remeber where.
Thank you in advance (and sorry for my ugly english!) ;)

I think this is what you are looking for: https://jsfiddle.net/QuVkV/2/
Here html structure:
<div id='wrapper'>
<div id='upper'>This is upper content</div>
<div id='position-saver'>
<div id='bar'>This is the menu bar</div>
</div>
<div id='lower'>This is some content lower than the menu bar</div>
</div>
This is the css :
#wrapper {
width: 100%;
height: 2000px;
}
#upper {
width: 100%;
height: 100px;
}
#position-saver {
height: 50px;
width: 100%;
}
#bar {
position: static;
height : 50px;
width: 100%;
}
And here is the javascript :
$(document).on('scroll', function(){
if ($('#bar')[0].offsetTop < $(document).scrollTop()){
$("#bar").css({position: "fixed", top:0});
}
if ($(document).scrollTop() < $("#position-saver")[0].offsetTop){
$("#bar").css({position: "static", top: 0});
}
});

I'm not sure but I've seen this type of thing on many site. One on 9gag.com
Anyway, you can use the position property of the css.
like this one: JSFiddle
#scroll-me{
width:100%;
height:100px;
background:#333;
position: fixed;
top:15px;
}
The position:fixed with top:15px of the scroll-me div makes it always 15px on top