We Keep Coding

Divs don't stop following scroll at footer

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');
}

Make a sticky sidebar?

I want to make my sidebar sticky on my webpage. Just click on a article like this one. On the right side you can see the sidebar. I want that the sidebar comes down if the user slides down and stops at #abspann. But if the user scrolls up again the sidebar should come up as well and stop at the original place.
I already tried this code which can be found here but it isn't working on my website... Can somebody help me please or tell me what I need to do?
Here the code:
<script>
jQuery(function(){
var sidebar = jQuery('#sidebar-wrap'),
nav = jQuery('.sidebar-content'),
startPosition = jQuery('#sidebar-wrap').offset().top,
stopPosition = jQuery('#abspann').offset().top - nav.outerHeight();
jQuery(document).scroll(function () {
//stick nav to top of page
var y = jQuery(this).scrollTop()
if (y > startPosition) {
nav.addClass('sticky');
if (y > stopPosition) {
nav.css('top', stopPosition - y);
} else {
nav.css('top', 0);
}
} else {
nav.removeClass('sticky');
}
});
});
</script>

You'll need to locate ur '$window' position by declaring
var $window = $(window).scrollTop();
Then, you can check if the $window has scrolled passed the point u want, like so:
if (height > 0) {
$('.sidebar-content').addClass('sticky');
} else {
$('.sidebar-content').removeClass('sticky');
}
Keep it simple!

found this thing, its working detection if its up or down. the rest you can just with addclass and remove class.
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
alert("I am an alert box!");
} else {
alert("asfasfasfasf!");
}
lastScrollTop = st;
});
I did put alert boxes to check if it works quickly, so be aware of the spams :D

Tested this in your fiddle and seems to work a treat you just need to make a few amendments to your original code:
var $navWrap = $('#navWrap'),
$nav = $('nav'),
startPosition = $navWrap.offset().top,
stopPosition = $('#stopHere').offset().top - $nav.outerHeight();
$(document).scroll(function () {
//stick nav to top of page
var scrollTop = $(this).scrollTop()
if (scrollTop > startPosition) {
$nav.addClass('sticky');
if (y > stopPosition) {
$nav.css('top', stopPosition - y);
} else {
$nav.css('top', 0);
}
} else {
$nav.removeClass('sticky');
}
});

No js is required. Css only : position:fixed;
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Fixed_positioning
https://caniuse.com/#search=fixed

Sticky Sidebar with JavaScript - Sticky only until specifed element

I want to create a sticky sidebar. But the sticky sidebar should only be stick until the ending of the sidebar has reached a specifed element.
Here is the webpage I want to get worked with the sidebar:
https://digital-hacks.de/vpn-verbindung-einrichten/
You can see the code in the head section or here.
<script>
var sidebar = $('#sidebar-content'),
nav = $('.sidebar-content'),
startPosition = sidebar .offset().top,
stopPosition = $('#abspann').offset().top - nav.outerHeight();
$(document).scroll(function () {
//stick nav to top of page
var y = $(this).scrollTop()
if (y > startPosition) {
nav.addClass('sticky');
if (y > stopPosition) {
nav.css('top', stopPosition - y);
} else {
nav.css('top', 0);
}
} else {
nav.removeClass('sticky');
}
});
</script>
I want that the sidebar gets attached to the screen if the user scrolls down and it should end if the ending of the sidebar has reached the element #abspann.
But I get a error in my code:
Uncaught TypeError: $ is not a function at (index):415
How can I get this working?
I found the sourcecode here.
Greetings

Cant add comment so posting as a answer. Try replacing $ with jQuery in your above code. Hopefully it will resolve the error.

I think this will work.
<script>
var nav = $('.sidebar-content'),
startPosition = nav.offset().top,
stopPosition = $('#abspann').offset().top - $(window).height();
$(document).scroll(function () {
//stick nav to top of page
var y = $(this).scrollTop()
if (y > startPosition) {
nav.addClass('sticky');
if (y > stopPosition) {
nav.css('top', stopPosition - y);
} else {
nav.css('top', 0);
}
} else {
nav.removeClass('sticky');
}
});
</script>
Style sticky class as you desire position: fixed and other tweaks you need to do. it's woking on your website. I tried using the console.

First you have to replace $ with jQuery and then try this,
var sidebar = jQuery('#sidebar-wrap'),
nav = jQuery('.sidebar-content'),
startPosition = sidebar.offset().top,
stopPosition = jQuery('#abspann').offset().top - nav.outerHeight();
jQuery(document).scroll(function () {
//stick nav to top of page
var y = jQuery(this).scrollTop()
if (y > startPosition) {
nav.addClass('sticky');
if (y > stopPosition) {
nav.css('top', stopPosition - y);
} else {
nav.css('top', 0);
}
} else {
nav.removeClass('sticky');
}
});
Also you have to add id here
<div class="wpb_wrapper" id="sidebar-wrap">
in wrapper of sidebar
and add style for sticky
.sticky {
position: fixed;
top:0;
}

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

How to change floating sidebar js code so that it works with ajax pagination?

I have a floating sidebar in my website www.rayshaft.com and I also have ajax pagination, so the sidebar is supposed to be floating until it reaches the footer of the page, but the problem is it works only with the 1st page, when the 2nd page is loaded via ajax the sidebar is not floating.
I was suggested to change my js code so that every time after ajax page load i need to call scroll function again or i need to recalculate maxY and footTop ech time scroll happens. I don't know any js programming so could you please help me. How can I modify this code to get what I want?
$(window).load(function(){
$(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 > top) {
if (y < maxY) {
$('#sidebar').addClass('fixed').removeAttr('style');
} else {
$('#sidebar').removeClass('fixed').css({
position: 'absolute',
top: (maxY - top) + 'px'
});
}
} else {
$('#sidebar').removeClass('fixed');
}
});

Make the function for the scrollbar a standalone function, and then call it when the ajax script finishes.
function ScrollBar()
{
$(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 > top) {
if (y < maxY) {
$('#sidebar').addClass('fixed').removeAttr('style');
} else {
$('#sidebar').removeClass('fixed').css({
position: 'absolute',
top: (maxY - top) + 'px'
});
}
} else {
$('#sidebar').removeClass('fixed');
}});
}
}
$(window).load(function(){
ScrollBar();
});
now as soon as the ajax pagination finishes, call this function: ScrollBar() to relocate the scrollbar.