Divs don't stop following scroll at footer - javascript

I tried a lot of solutions but I cant make the divs stop following the scroll at the footer.
Here is my code to make the divs follow the scroll (colderecha and colizquierda are my divs that follow the scroll):
$(document).ready(function () {
var top = $('#colizquierda').offset().top - parseFloat($('#colizquierda').css('marginTop').replace(/auto/, 0));
$(window).scroll(function (event) {
var y = $(this).scrollTop();
//if y > top, it means that if we scroll down any more, parts of our element will be outside the viewport
//so we move the element down so that it remains in view.
if (y >= top) {
var difference = y - top;
$('#colizquierda').css("top",difference);
}
});
});
$(document).ready(function () {
var top = $('#colderecha').offset().top - parseFloat($('#colderecha').css('marginTop').replace(/auto/, 0));
$(window).scroll(function (event) {
var y = $(this).scrollTop();
//if y > top, it means that if we scroll down any more, parts of our element will be outside the viewport
//so we move the element down so that it remains in view.
if (y >= top) {
var difference = y - top;
$('#colderecha').css("top",difference);
}
});
});
What I have tried:
$(document).scroll(function() {
checkOffset();
});
function checkOffset() {
if ($('#colizquierda').offset().top + $('#colizquierda').height() >= $('#footer').offset().top - 10)
$('#colizquierda').css('position', 'absolute');
if ($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
$('#colizquierda').css('position', 'fixed');
if ($('#colderecha').offset().top + $('#colderecha').height() >= $('#footer').offset().top - 10)
$('#colderecha').css('position', 'absolute');
if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
$('#colderecha').css('position', 'fixed');
}

Related

Do something when offset of div is smaler than fixed value

I want to fade the opacity of menu if it's offset to top of the window is smaler than 700px.
But I don't understand why this code doesn't work.
$(window).scroll(function() {
var offset = $(".navigation-top").offset();
var posY = offset.top - $(window).scrollTop();
if ($(posY) < 700) {
$('.navigation-top').animate({'opacity':'0.1'},500);
} else {
$('.navigation-top').animate({'opacity':'1'},500);
}
});
Thnaks to Carsten and Jeremy,
I ended up with this. But the .stop() is mantadory. Otherwise it works only with a extreme delay because of the mess of data from scrolling.
$(window).scroll(function() {
var offset = $(".navigation-top").offset();
var posY = offset.top - $(window).scrollTop();
if (posY < 700) {
$('.navigation-top').stop().animate({'opacity':'0.1'},500);
} else {
$('.navigation-top').stop().animate({'opacity':'1'},500);
}
});

Execute code after scrolling a certain amount of pixels from a certain point (up or down)

I'm currently making an overlay that covers a sticky top bar when the user has scrolled beyond a certain point (down) and disappears when scrolling back up. However, I'd like to be able to scroll for at least 50px before the code is executed (something like a gap before the overlay is triggered).
$(function() {
var prevScroll = $(document).scrollTop(); //initial position
$(window).scroll(function() {
var newScroll = $(document).scrollTop(); //position from top after scrolling
if(newScroll > prevScroll) { // checks if the user has scrolled up or down
var fromNew = $(document).scrollTop(); // holds value to compare with the position + gap amount
if (fromNew > newScroll + 50) { //checks to see if scrolled for 50px
$("#stick-start").fadeIn("fast");
prevScroll = newScroll + 50; //initial position + scrolled amount
};
} else {
var fromNew = $(document).scrollTop();
if (fromNew > newScroll - 50) {
if ($("#stick-start").hasClass("is-stuck")) {
$("#stick-start").fadeOut("fast");
prevScroll = newScroll - 50;
};
};
};
});
});
The condition that checks whether you're scrolling up or down works. But as it is now, the overlay just keeps fading in and out repeatedly. How do I make it so that you have to scroll at least 50px before anything happens ?
I think this should get you where you're going.
var $document = $(document);
$(window).scroll(function() {
if ($document.scrollTop() >= 50) {
$("#stick-start").fadeIn("fast");
} else {
$("#stick-start").fadeOut("fast");
}
});
EDIT: had an error, should be good now.
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) {
$("#stick-start").fadeIn();
} else {
$("#stick-start").fadeOut();
}
});

Scroll a specific element inside container using JS or jQuery

I have huge sidebar element and when the page is scrolled sidebar point to the current element that is in a viewport. But sometimes active element is out of sidebar visible space i.e below or above borders. And then the user needs to scroll manually to be able to see active element.
I want to try use logic for determining if the active element is out sidebar visible space and auto scroll if needed.
$(window).on('scroll', function () {
var scrollTop = $(this).scrollTop();
var container = $('#sectionMenu');
var containerHeight = container.height();
$(data).each(function () {
var topDistance = $(this).offset().top - 250;
var id = $(this).attr('id');
var elem = $('#_' + id);
if ((topDistance) < scrollTop && (topDistance + $(this).height() * 0.95) > scrollTop) {
if (autoScrollFlag) {
if (!elem.hasClass('sideBarActive')) {
var scrollPosition = elem.offset().top - container.offset().top;
removeActiveMenuItems(data);
elem.addClass('sideBarActive');
if (containerHeight < scrollPosition) {
// TODO automated scroll
}
}
}
autoScrollFlag = 1;
}
});
});
The solution that has worked for me was like this.
if (containerHeight < scrollPosition) {
container.animate({
scrollTop: '+=100px'
}, 800);
}

Jquery sticky menu not being caught by footer

Can anyone help me pinpoint the issue with my script please?
$(function () {
var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));
var maxY = footTop - $('#sidebar').outerHeight();
$(window).scroll(function (evt) {
var y = $(this).scrollTop();
if (y > 100) {
if (y < maxY) {
$('#sidebar').addClass('stickyside').removeAttr('style');
} else {
$('#sidebar').removeClass('stickyside').css({
position: 'absolute',
top: (maxY - top) + 'px'
});
}
} else {
$('#sidebar').removeClass('stickyside');
}
});
});
Live site here - https://tregothnan.co.uk/tea-herbal-infusions/
Sticky sidenav is spilling over the footer div and no matter what I try I can't get it to work. It works fine in my jsfiddle prototype.
The problem is that you are forgetting the margin-top of your sidebar in your calculation:
var maxY = footTop - $('#sidebar').outerHeight() - 68;
In your Prototype JSFiddle the sidebar just happened to have no margin-top.
On a sidenote: you may want to cache your selectors to improve performance. If you use the same selector more than once, for example $("#sidebar"), put it in a variable:var sidebar = $("#sidebar");.
Ok - many thanks #dark-ashelin
ended up with this - bit of a hack but it works.
$(function () {
var sidebar = $("#sidebar");
var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0))-60;
var maxY = footTop - $('#sidebar').outerHeight() - 85;
$(window).scroll(function (evt) {
var y = $(this).scrollTop();
if (y > 100) {
if (y < maxY) {
$('#sidebar').addClass('stickyside').removeAttr('style');
} else {
$('#sidebar').removeClass('stickyside').css({
position: 'absolute',
top: (maxY + 50) + 'px'
});
}
} else {
$('#sidebar').removeClass('stickyside');
}
});
});

Fixed sidebar on the scroll stop at div

I try to make sure that a div "filter" becomes fixed when scrolling and then stop when it comes down to "outside_footer_wrapper". use the following script but can not get it to work?
jsfiddle
$(function() {
var top = $('#filter').offset().top - parseFloat($('#filter').css('marginTop').replace(/auto/, 0));
var footTop = $('#outside_footer_wrapper').offset().top - parseFloat($('#outside_footer_wrapper').css('marginTop').replace(/auto/, 0));
var maxY = footTop - $('#filter').outerHeight();
$(window).scroll(function(evt) {
var y = $(this).scrollTop();
if (y > top) {
if (y < maxY) {
$('#filter').addClass('fixed').removeAttr('style');
} else {
$('#filter').removeClass('fixed').css({
position: 'absolute',
top: (maxY - top) + 'px'
});
}
} else {
$('#filter').removeClass('fixed');
}
});
});
If you want to stop the position:fixed after you reach the footer you can do something like this faking with the top:
$(function() {
var top = $('#filter').offset().top,
footTop = $('#outside_footer_wrapper').offset().top,
maxY = footTop - $('#filter').outerHeight();
$(window).scroll(function(evt) {
var y = $(this).scrollTop();
if (y > top) {
$('#filter').addClass('fixed').removeAttr('style');
if (y > maxY-20){
var min = y - maxY + 20;
$('#filter').css('top','-'+min+'px');
}
} else {
$('#filter').removeClass('fixed');
}
});
});
Also take in care with the CSS for the class fixed you need to make that with equal specificity of #filter I made this change:
#sidebar #filter.fixed /*Add #sidebar*/
Check This Demo Fiddle
if you know at which pixel number the filter have to be fixed and at which pixel number the footer starts you can try this function:
scrollTop
Is it something like this?
jsfiddle
// get box div position
var box = document.getElementById('box').offsetTop;
window.onscroll = function(){
// get current scroll position
var scroll_top = document.body.scrollTop || document.documentElement.scrollTop;
document.getElementById('scbox').innerText = scroll_top + ' ' + box;
// if current scroll position >= box div position then box position fixed
if(scroll_top >= box)
document.getElementById('box').style.position = 'fixed';
else
document.getElementById('box').style.position = 'relative';
}
try this:
#sidebar {
position: fixed;
}
jsfiddle here

Categories