Develop Reference

How to put a div from the top of my page to the bottom of it when i scroll to the end of the page

So i hope my question is clear enought ! I have a div at the top of my page and i'd like that div to move at the bottom when i scroll and hit the end of the page, well i think you get the idea !
If anyone as an idea, i'm taking it ;)

Try to use scroll event with animate() method, and use a flag scroll to make sure the div will be moved just one time :
var scroll = true;
$(document).on('scroll', function(){
var my_div = $("#my-div");
if(scroll){
scroll=false;
my_div.animate({
top : $('body').height() - my_div.offset().top - my_div.outerHeight(),
}, 1000);
}
})
Hope that will give you an idea.
var scroll = true;
$(document).on('scroll', function(){
var my_div = $("#my-div");
if(scroll){
scroll=false;
my_div.animate({
top : $('body').height() - my_div.offset().top - my_div.outerHeight(),
}, 1000);
}
})
html, body { height: 500px; }
#my-div {
position: absolute;
top: 0;
left: 0;
width: 90%;
height: 100px;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my-div"></div>

You can detect when user scroll to the bottom of the page and then transition top property from 0 to the height of the window minus height of that element.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$('div').css({
top: $(window).height() - $('div').height()
});
}
});
CODEPEN

Dynamic resize a div while scrolling using jQuery

I am searching for a jQuery-solution for my fixed header. If the user scrolls down, the header shall shrink in the same way the scrolling position is until a minimum height is reached.
Example:
scrolling position: 0
div height: 250px
scrolling position: 85
div height: 165px (=250px-85)
scrolling position: 435
div height: 100px (=minimum height)
Here is the quick fiddle.
body {
height: 1000px;
}
.header {
position: fixed;
background-color: lightblue;
height: 250px;
width: 100%;
}
<div class="header"></div>
Here is the solution for me: fiddle

You can use a combination of the Window Scroll Event and scrollTop() function to achieve the same.
$(window).scroll(function(){
var distanceFromTop = $(document).scrollTop();
if(distanceFromTop < 84 )
{
// set div height to 250px
}
else if(distanceFromTop == 85)
{
// reduce the div height
}
else if(distanceFromTop > 85 && distanceFromTop <= 434)
{
// do something with height if required
}
else if(distanceFromTop > 434)
{
// set div height to 100px
}
});
DEMO

footer animate up when scrolling and touch bottom and animate down when scrolling up

This is a question that once asked in a different variation,
and i tried to use the code, but it doesn't work for me.
I want my footer to animate up when scrolling just a bit before reaching the bottom, and closing while scrolling up.
like in this site - you will see if you scroll all the way down.
http://www.pronto.co.il
this is my code:
css:
body, html { height: 1000px; }
html:
<button id="buttonTest">try me</button>
<div id="footer" style="display: none;"><img src="pics/try_me_1.png" ></div>
I'm trying to leave the jquery code but I don't understand exactly how it works here yet.
so this is the link to the answer - i took it and use animate() instead the alert.
Footer animates up when you reach bottom of screen, but fails to animate down when you scroll back up
will help me a lot. thank u so very much

you can add/remove a given class
var footer = document.querySelector("#footer");
window.onscroll = function(event) {
((window.innerHeight + window.scrollY) >= document.body.offsetHeight) ? footer.classList.add("visible") : footer.classList.remove("visible")
};
And here is your css
#footer{
position: fixed;
bottom: 0;
overflow: hidden;
height: 0;
transition: height .3s ease
}
#footer.visible{
height: 100px;/*what ever you want*/
}

As the comment suggest there is no animation on the link you provide, but based on the link question is just simple as this:
var isShowing = false;
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() === $(document).height()) {
$('#footer').slideToggle();
isShowing = true;
} else if (isShowing === true && $(window).scrollTop() + $(window).height() <= $(document).height() * 0.9) {
$('#footer').slideToggle();
isShowing = false;
}
});
body,
html {
height: 1000px;
}
#footer {
height: 150px;
position: fixed;
bottom: 0;
width: 100%;
left: 0;
background:black;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="buttonTest">try me</button>
<div id="footer"></div>

Keep scroll to top button in the same height?

I've a problem with my button. What I want is when the windows size on the height is changed, how can force the button to stay in the same height? I don't want it to follow or be pressed down as the height is changed...
http://jsfiddle.net/ccq9cs9L/3/
HTML
<a href="#" class="scrollToTop hidden-phone">
<span class="icon icon-arrow-up-white"></span>
</a>
<div class="myDiv">
<div class="myContent">
a lot of text
</div>
</div>
CSS
a.scrollToTop {
content: "";
z-index: 1000;
width: 60px;
height: 45px;
background: #78b209;
position: fixed;
top: 35.5%;
right: 0;
display: none;
}
JavaScript
$(document).scroll(function(e) { // This is scrollToTop button
e.preventDefault();
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
$('.scrollToTop').click(function () { // Scroll to top with ease
$('html, body').animate({ scrollTop: 0 }, 1000, 'easeOutExpo');
return false;
});

If I understand you correctly, your question is actually about CSS. Try changing top: 35.5%; to a static amount, for example top: 100px;
If you want the pixel amount to be based on the viewport height, you can get that with
$(window).height();
So to always show the button at position N % from the top and keep it there despite viewport resizing you could do this:
function positionButton() {
var percFromTop = 35,
newHeight = $(window).height() / 100 * percFromTop;
$(".scrollToTop").css("top", newHeight+"px");
}
$(document).ready(function() {
positionButton();
};
See it in a fiddle here: http://jsfiddle.net/ccq9cs9L/9/

Keeping element centred with slider (while following)

Right so I had a question to help with the first bit of this and that was just getting a div to follow the slider knob. After messing around with it for a while we came up with the solution. Now I have a div following the slider knob I need it centred on it at all times.
So to keep this an simple as possible here is a image of what I am trying to fix.
In the image above you can see the slider and the div that is following the slider knob. Under that I have places | so you can see that its not fully centred with slider knob. I need this to be centred under the slider knob at all times (in the image it should be under/in the middle of the gray bit). It tends to start to mess up when going 40% and below as well as 60% and above.
What I have tried:
I can't think of an easy way to fix this (hence this post) but I did try a little cheat by doing the following:
if (pct >= 80) {
// Position the follow div and arrow
$('#follow').css('left', (o.value * 0.98) + '%');
} else if (pct >= 70) {
$('#follow').css('left', (o.value * 0.99) + '%');
} else if (pct <= 50 & pct >= 40) {
$('#follow').css('left', (o.value * 1.02) + '%');
} else if (pct <= 40 & pct >= 30) {
$('#follow').css('left', (o.value * 1.04) + '%');
} else if (pct <= 30 & pct >= 20) {
$('#follow').css('left', (o.value * 1.08) + '%');
}
Now what this does it trys to keep the div on track with the slider by changing the % as it moves along. This does work (kinda) but leads to the div not being smooth and it goes all jumpy due to the calculation corrections.
Here is an example of what I have so far:
HTML:
<div class="slider-container">
<div id="follow-container">
<div id="follow">I am following the slider!
<br />
<div id="percentage"></div>
<br />|</div>
</div>
<div id="testslider"></div>
</div>
CSS:
#testslider {
position: absolute;
top: 50px;
left: -40px;
background-size: 100%;
background-position: center;
}
.slider-container {
padding: 55px;
}
#follow-container {
position: relative;
left: -65px;
bottom: 2px;
}
#follow {
position: absolute;
width: 193px;
height:40px;
margin-left: -77px;
/* half width */
text-align: center;
color: black;
border: 1px solid;
}
JAVASCRIPT:
$('#testslider').sGlide({
height: 16,
startAt: 70,
colorStart: '#C6F1F8',
colorEnd: '#C6F1F8',
drag: function (o) {
var pct = Math.round((o.value));
$('#percentage').html(pct);
// Position the follow div and arrow
$('#follow').css('left', o.value + '%');
},
onButton: function (o) {
var pct = Math.round(o.value) + '%';
$('#percentage').html(pct);
}
});
DEMO HERE
Any help here would be great and as people before have said "so what is your question".
Overall question: How can I keep the following div aligned with the slider knob?

Only way i can see it work is to wrap the | inside span class!!
working fiddle
HTML
<span class="vline"><br />|</span>
CSS
#follow > span.vline {
position: relative;
left:4%;
}
EDIT
as per the comments discussion, this is probably your treasure!!
solution (based on you question fiddle, not my 1st attempted fiddle)
css
#follow-container {
position: fixed; /*changed*/
left:50%; /* change as per your need, left:60%; would make it
center to the full 100% width*/
margin-left:-96px; /*half of divs width*/
}

After all this it turns out to solve my problem I needed to give #follow-container a width.
Giving this the correct with of the slider allowed the child div to align correctly with the slider knob.
Example:
#follow-container {
position: relative;
bottom: 2px;
width: 760px;
left: -100px;
}
This seems to have fixed my problem on my real project, thanks for all the help NoobEditor and Mr.Alien.