Scroll button to position when page scroll hits position - javascript

So basically... as I scroll down a page, when it hits a certain point on the scroll, I want my button to scroll down the page to the bottom. Here is what I have so far.
I know the detection of when to do the action works because un-commenting out the alert works at the correct position. I need help with the button being scrolled down.
$(document).ready(function() {
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height > 1000) {
//alert("hit part of page i want... works!");
$('#<%= btnFinish.ClientID %>').animate({ scrollTop: $(document).height() }, 500);
}
});
EDIT: HOW TO DO:
$(window).scroll(function() {
var d;
var i;
var top = $(window).scrollTop();
var windowHeight = $(window).height();
var docHeight = $(document).height()
var obj = $('#<%= btnFinish.ClientID %>');
var bottom = obj.position().top + obj.height();
if (top + windowHeight == docHeight && bottom <= 800) {
d = 0;
for(i = 410; i>=85; i=i-.1){
d += .15;
(function(ii,dd){
setTimeout(function(){
$('#<%= btnFinish.ClientID %>').css({ bottom: ii, right: 460 });
}, dd);
})(i,d);
}
} else if (top == 0 && bottom >= 801) {
d = 0;
for(i = 85; i<=410; i=i+.1){
d += .15;
(function(ii,dd){
setTimeout(function(){
$('#<%= btnFinish.ClientID %>').css({ bottom: ii, right: 460 });
}, dd);
})(i,d);
}
}
});

You can fix its position with CSS style.
style="position: fixed; bottom: 10px; right: 10px;"
And if you want to make it display after specific scroll then just show/hide that button after some scroll as per your convenient.

You can use CSS transition:
$( document ).ready( function () {
$( window ).scroll( function () {
var height = $( window ).scrollTop();
if ( height < 500 ) {}
if ( height > 1000 ) {
$('#test').css({ bottom: 10, right: 10 });
} else {
$('#test').css({ bottom: 170, right: 10 });
}
} );
} );
body {
position: relative;
height: 2000px
}
#test {
position: fixed;
bottom: 170px;
right: 10px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="test">Button</button>

$(window).scroll(function() {
var d;
var i;
var top = $(window).scrollTop();
var windowHeight = $(window).height();
var docHeight = $(document).height()
var obj = $('#<%= btnFinish.ClientID %>');
var bottom = obj.position().top + obj.height();
if (top + windowHeight == docHeight && bottom <= 800) {
d = 0;
for(i = 410; i>=85; i=i-.1){
d += .15;
(function(ii,dd){
setTimeout(function(){
$('#<%= btnFinish.ClientID %>').css({ bottom: ii, right: 460 });
}, dd);
})(i,d);
}
} else if (top == 0 && bottom >= 801) {
d = 0;
for(i = 85; i<=410; i=i+.1){
d += .15;
(function(ii,dd){
setTimeout(function(){
$('#<%= btnFinish.ClientID %>').css({ bottom: ii, right: 460 });
}, dd);
})(i,d);
}
}
});

Related

How to hide a div element when the last section has been reached?

I have an sticky footer which contains a clickable arrow that lets me click through the sections on my website, my only issue is that it does not disappear when the last section has been reached. I'm quite new to jQuery and JS and not sure how to execute something like this.
I've done some research and tried this with no luck:
document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById('arrow').style.display='none';
}
}
Here is the rest of what I have:
<div class="scroller animated pulse infinite" id="arrow">
<i class="ion-md-arrow-dropdown"></i>
</div>
CSS:
.scroller {
height: 80px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: transparent;
box-shadow: 0 2px 2px #ddd;
z-index: 1;
}
.scroller i {
color: #fff;
-webkit-text-stroke: 1px #555;
font-size: 70px;
margin: 0 48.5%;
}
JS:
$(function(){
var pagePositon = -1,
sectionsSeclector = '.scrolling_section',
$scrollItems = $(sectionsSeclector),
offsetTolorence = 30,
pageMaxPosition = $scrollItems.length - 1;
//Map the sections:
$scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); });
// Bind to scroll
$(window).bind('scroll',upPos);
//Move on click:
$('#arrow i').click(function(e){
if ($(this).hasClass('ion-md-arrow-dropdown') && pagePositon+0 <= pageMaxPosition) {
pagePositon++;
$('html, body').stop().animate({
scrollTop: $scrollItems.eq(pagePositon).offset().top - $('nav').height()
}, 2000);
}
});
//Update position func:
function upPos(){
var fromTop = $(this).scrollTop();
var $cur = null;
$scrollItems.each(function(index,ele){
if ($(ele).offset().top < fromTop + offsetTolorence) $cur = $(ele);
});
if ($cur != null && pagePositon != $cur.data('pos')) {
pagePositon = $cur.data('pos');
}
}
});
According to what I understand - you should first see iכ the footer section is visible and if so - hide the arrow, else - show the arrow
For that, this code should do the trick
$(window).scroll(function() {
var top_of_element = $('.footer-nav').offset().top;
var bottom_of_element = $('.footer-nav').offset().top + $('.footer-nav').outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();
if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
$('#arrow').hide();
} else {
$('#arrow').show();
}
});
based on Jquery check if element is visible in viewport

jQuery mouseover animation with alert

My question is - Writing a page containing a small square,every time user brings the cursor close to the box, the box must move away from the mouse pointer. Finally when the box reaches the corner of the page, it should display a message.
So far, I have animated the box from INITIAL to last position on the screen. How to revert it back to original position, with an alert message??
$(document).ready(function() {
var x = $(window).width();
var y = $("#div2").width();
$("#div2").mouseover(function(){
for (var i = y ; i <= x ; i++) {
$("#div2").animate({
left: 100 + "px"
});
}
});
});
#div2 {
top: 100px;
/*left: 100px;*/
height: 100px;
width: 100px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div2" style="position: relative;"></div><br>
$(document).ready(function() {
var x = $(window).width();
var y = $("#div2").width();
var left = 0;
$("#div2").mouseover(function(){
left+= 100;
if(left <= x ){
$("#div2").animate({
left: left + "px"
});
} else {
alert('Back to original');
$(this).css('left', '0');
left=0; //this should be their else it will alert many times...
}
});
});
#div2 {
top: 100px;
/*left: 100px;*/
height: 100px;
width: 100px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div2" style="position: relative;"></div><br>
i i=529(window width=531) for quick out put initialize i=y then if it reaches end it will be moved to left:opx
you said you already made it to move to last and your mistake is you didn't assign i in left.
$(document).ready(function() {
var x = $(window).width();
var y = $("#div2").width();
$("#div2").mouseover(function(){
for (var i = 529 ; i <= x ; i++) {
$("#div2").animate({
left: i+"px"
});
}
alert("reached");
$("#div2").animate({
left: "0px"
});
});
});
#div2 {
top: 100px;
/*left: 100px;*/
height: 100px;
width: 100px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div2" style="position: relative;"></div><br>
Is this what you wanted?
$(document).ready(function() {
var x = $(window).width();
var y = $("#div2").width();
var left = 0;
$("#div2").mouseover(function(){
left+= 100;
if(left <= x ){
$("#div2").animate({
left: left + "px"
});
} else {
alert('Back to original');
$(this).css('left', '0');
left = 0;
}
});
});
#div2 {
top: 100px;
/*left: 100px;*/
height: 100px;
width: 100px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div2" style="position: relative;"></div><br>
First of all you don't need a loop to animate element to relative position, just use '+=100px' notation. You could also calculate element's next position to prevent if from overflow the window. Check this snippet.
$(document).ready(function() {
var vw = $(window).width();
var $el = $('#div2');
var width = $el.width();
var direction = 1;
var defaultAmount = 100; // Default travel distance
var amount = defaultAmount;
$el.mouseover(function() {
var changeDir = false;
// Check if element will be out of range
if (isOutOfRange() && direction === 1) {
alert('Will be at the end, will reverse')
amount = vw - $el.offset().left - width;
changeDir = true;
}
if (isAtBeginning() && direction === -1) {
alert('Will be at the beginning, will reverse')
amount = $el.offset().left;
changeDir = true;
}
$el.animate({
left: direction === 1 ? '+=' + amount + 'px' : '-='+ amount + 'px'
});
// Change direction to opposite if ellement is at the edge
if (changeDir) direction = direction * -1;
// Return to default
amount = defaultAmount;
});
function isOutOfRange() {
return width + amount + $el.offset().left >= vw;
}
function isAtBeginning(){
return $el.offset().left - amount <= 0;
}
});
#div2 {
top: 100px;
/*left: 100px;*/
height: 100px;
width: 100px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div2" style="position: relative;"></div><br>
Final Solution
$(document).ready(function() {
var direction=1;
var x = $(window).width();
var y = $("#div2").width();
var left = 0;
$("#div2").mouseover(function(){
if(left + y <= x )
{
left = left + direction*100;
$("#div2").animate({
left: left + "px"
});
}
else
{
alert("Moving Back!");
direction = -1;
left = left + direction*100;
$("#div2").animate({
left: left + "px"
});
}
if(left <= 0)
{
direction = 1;
left = left + direction*100;
alert("Moving Forward!!");
$("#div2").animate({
left: left + "px"
});
}
//$(this).css("left", "0");
});
});

Fixed 100% height sidebar that after scroll stick to footer

So I'm trying to get my fixed 100% height sidebar when atteint the top of the footer go from fixed position to absolute position withe specific given height and stick to footer.
HTML Structure
<header ng-include="'app/views/partials/application-specific/top-navbar.html'"></header>
<section ng-include="'app/views/partials/user/top-back-user.html'"></section>
<div class="content">
<aside class="aside sidebar" id="stick" ng-include="'app/views/partials/user/sidebar-user.html'" style="max-height: 100% !important;"></aside>
<div class="content-wrapper" id="content-wrapper" ui-view>
</div>
</div>
<footer class="footer" id="footer" ng-include="'app/views/partials/user/footer.html'"style="padding-bottom: 0px; height:300px;" ></footer>
1- the first javascript code serve to fix the sidebar to top after 150px scroll.
var windowWidth = $(window).width();
if (windowWidth > 991) {
$(window).scroll(function() {
if ($(this).scrollTop() > 150) {
$('#menu1-fixed').addClass('fixed1');
$('.fado').slideUp();
$('.fado').slideUp(600);
} else {
$('#menu1-fixed').removeClass('fixed1');
$('.fado').slideDown();
$('.fado').slideDown(600);
}
})
};
css
.fixed1 {
position:fixed !important; top: 0em !important; margin-top: 3.4em !important;
}
2- The second code is after scroll 900px from top replace fixed position with absolute and a specific height. In that case i wannt to change 900px to detect the top of the footer and after change class to absolute.
var windowWidth = $(window).width();
if (windowWidth > 991) {
$(window).scroll(function() {
if ($(this).scrollTop() > 900) {
$('#menu1-fixed').addClass('main-sidebar2');
} else {
$('#menu1-fixed').removeClass('main-sidebar2');
}
})
};
css
.main-sidebar2 {
position: absolute !important;
height:600px !important;
min-height: 580px !important;
top:1000px !important;
}
please try with below example it will work fine.
$( document ).ready(function() {
var e = $("#stick");
var lastScrollTop = 0;
var firstOffset = e.offset().top;
var lastA = e.offset().top;
var isFixed = false;
$(window).scroll(function(event){
if (isFixed) {
return;
}
var a = e.offset().top;
var b = e.height();
var c = $(window).height();
var d = $(window).scrollTop();
if (b <= c - a) {
e.css({position: "fixed"});
isFixed = true;
return;
}
if (d > lastScrollTop){ // scroll down
if (e.css("position") != "fixed" && c + d >= a + b) {
e.css({position: "fixed", bottom: 0, top: "auto"});
}
if (a - d >= firstOffset) {
e.css({position: "absolute", bottom: "auto", top: lastA});
}
} else { // scroll up
if (a - d >= firstOffset) {
if (e.css("position") != "fixed") {
e.css({position: "fixed", bottom: "auto", top: firstOffset});
}
} else {
if (e.css("position") != "absolute") {
e.css({position: "absolute", bottom: "auto", top: lastA});
}
}
}
lastScrollTop = d;
lastA = a;
});
}
});

Javascript Menu Jumping from bottom to top instead of Scrolling

I am trying to make a menu that sticks to the bottom of the page and then to the top after scrolling. The only problem is that instead of scrolling with the page, the menu stays in the same place and then jumps to the top right at the end.
I am running stellar.js on the site also and I wondered if this was conflicting but I removed the calling javascript and the problem persisted so I put it back.
The site URL is www.percolatedpropaganda.co.uk
I am stumped and any help would be much appreciated!
Javascript
$(document).ready(function() {
var windowH = $(window).height();
var stickToBot = windowH - $('#menu').outerHeight(true);
$('#menu').css({'top': stickToBot + 'px'});
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal > stickToBot ) {
$('#menu').css({'position':'fixed','top' :'0px'});
} else {
$('#menu').css({'position':'absolute','top': stickToBot +'px'});
}
});
});
CSS
#menu {
font-size: 85%;
position: relative;
float: left;
}
Why don't you try this:
Javascript:
$(document).ready(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal > 0 ) {
$('#menu').css({bottom: '', top :'0px'});
} else {
$('#menu').css({top: '', bottom: '0px'});
}
});
});
CSS:
#menu {
position: fixed;
bottom: 0;
}
Check it out: Example
UPDATE:
If you want the movement to be animated use this instead:
Javascript:
$(document).ready(function() {
var menu = $('#menu');
var windowH = $(window).height();
var stickToBot = windowH - menu.outerHeight(true);
menu.css('top', stickToBot + 'px');
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal > 0 ) {
menu.stop().animate({top :'0px'});
} else {
menu.stop().animate({top: stickToBot + 'px'});
}
});
});
CSS:
#menu {
position: fixed;
}
Have a look: Example
UPDATE 2:
If you want it like cwtchcamping.co.uk... have a look at this:
Javascript:
$(document).ready(function() {
var menu = $('#menu');
var windowH = $(window).height();
var stickToBot = windowH - menu.outerHeight(true);
menu.css('top', stickToBot + 'px');
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if (scrollVal > stickToBot) {
menu.css({top: '0px', position: 'fixed'});
}
else {
menu.css({top: stickToBot + 'px', position: 'absolute'});
}
});
});
CSS:
#menu {
position: absolute;
}
Example: JSFiddle

jQuery Stop Fixed Sidebar When Reach Footer

I have a sidebar widget on my website, when I scroll the page, sidebar will become position fixed. But this sidebar obstruct the footer. I want the sidebar stop fixed when touch the footer, something like this script http://jsfiddle.net/bryanjamesross/VtPcm/
This is my website http://www.creativebrain.web.id/view/gadget/171/performa-buas-lg-g2-menantang-samsung-galaxy-s4
Here is my code to fixed position the sidebar
<script type="text/javascript">
$(function() {
var nav = $('#gads300x600');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: '90px',
left: nav.offset().left,
width: nav.width()
});
nav.css('z-index',999);
isFixed = true;
}
else if (!shouldBeFixed && isFixed)
{
nav.css({
position: 'static'
});
isFixed = false;
}
});
});
</script>
I have modified that code like script in jsfiddle above, but I think something wrong in my code
<script type="text/javascript">
$(function() {
var nav = $('#gads300x600');
var footer = $('#copyright');
var navHomeY = nav.offset().top;
var navFooterY = footer.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
var maxY = navFooterY - nav.outerHeight();
if (shouldBeFixed && !isFixed) {
if (scrollTop < maxY) {
nav.css({
position: 'absolute',
top: '0px',
left: nav.offset().left,
width: nav.width()
});
nav.css('z-index',1000);
}
else{
nav.css({
position: 'fixed',
top: '90px',
left: nav.offset().left,
width: nav.width()
});
nav.css('z-index',1000);
}
isFixed = true;
}
else if (!shouldBeFixed && isFixed)
{
nav.css({
position: 'static'
});
isFixed = false;
}
});
});
</script>
Please use below script to make sidebar fixed.
<script type="text/javascript">
$(document).ready(function(e) {
var containerTop = $('.container').offset().top;
$(window).scroll(function(){
var scrollT = $(window).scrollTop();
if(scrollT > containerTop){
$('.sidebar').css({position:'fixed',zIndex:1000,top:'110px'});
}else{
$('.sidebar').css({position:'relative',zIndex:1000,top:'0px'});
}
});
});
</script>
$(function () {
var nav = $('#gads300x600');
var footer = $('#copyright');
var navHomeY = nav.offset().top;
var navFooterY = footer.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function () {
var scrollTop = $w.scrollTop();
var topSidebar = navHomeY;
var topFooter = navFooterY;
var bottomSidebar = nav.offsetHeight + topSidebar;
var footerIsOnSight = (scrollTop + $window.innerHeight) >= topFooter;
var shouldBeFixed = (scrollTop + $window.innerHeight) >= bottomSidebar ;
var maxY = navFooterY - nav.outerHeight();
if (!isFixed && shouldBeFixed) {
nav.css({
position: 'fixed',
top: '90px',
left: nav.offset().left,
width: nav.width()
});
nav.css('z-index', 1000);
isFixed = true;
}
if ((isFixed && (scrollTop <= 0))) {
nav.css({
position: 'absolute',
top: '0px',
left: nav.offset().left,
width: nav.width()
});
nav.css('z-index', 1000);
isSticked = false;
} else {
if (isSticked && footerIsOnSight) {
nav.css({
position: 'static'
});
isFixed = false;
}
}
});
});

Categories