We Keep Coding

On footer scroll keep it fixed

I have an issue i've been working on for a day or so, i'm making an online shop, where when you visit a specific item's page, you have a fixed [add to cart] button as a footer, and when i scroll to a specific point, it should become static, check this example here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sticky_header
the only difference is that i need it to be a header, not a footer.
here's my jquery code:
const myFunction = () => {
let lastScrollTop = 0
$(window).scroll(() => {
const footerTop = $('.wrapper-footer')?.offset()?.top || null
const container = $('.wrapper-mobile-price')
const containerHeight = wrapperMobilePrice.height()
const bottomOfScreen = $(window).scrollTop() + $(window).innerHeight()
const st = $(window).scrollTop()
if (st > lastScrollTop) {
if (bottomOfScreen > footerTop + (containerHeight / 2)) {
container.css({position: 'static'})
}
} else {
if (bottomOfScreen + containerHeight < footerTop) {
container.css({position: 'fixed'})
}
}
lastScrollTop = st
})
}
please help if you have any solutions, thanks!

Have you tried using CSS sticky positioning? You can see an example here
You should specify in which position an element should be fixed.
When an element reaches that position it becomes fixed.
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 500px;
}

How to display a scrolled navbar when page refresh?

So I got this script :
$(function() {
var header = $(".header-nav");
$el = $(".header_logo a").clone().addClass('cloned');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
header.addClass("scrolled");
} else {
header.removeClass("scrolled");
}
if (scroll > 50) {
$el.appendTo(".header-logo");
} else {
$('.cloned').remove();
}
});
});
It makes the navbar fixed on scroll and clone logo and reset it on top page.
But if I refresh page at the middle, navbar isn't displayed cause it displays only on scroll.
Is there a way to fix that please?
Thanks.

As evolutionxbox suggested you should move your code into a function and call it both on scroll and on load like this:
$(function() {
var header = $(".header-nav");
$el = $(".header_logo a").clone().addClass('cloned');
myScroller();
$(window).scroll(function() {
myScroller();
});
function myScroller(){
var scroll = $(window).scrollTop();
if (scroll >= 50) {
header.addClass("scrolled");
} else {
header.removeClass("scrolled");
}
if (scroll > 50) {
$el.appendTo(".header-logo");
} else {
$('.cloned').remove();
}
}
});

Add extra top .offset()

I was wondering how to add extra 'top' .offset() to this div;
mapstick
I think its something to do startPosition?? I thought I could get away with changing it in CSS but this just broke the function of the div unsticking at a certain height.
I tried in the CSS to make the top px '!important' on the div. This is what broke the if/else statement as it messed up what the actual top of the div and the script didn't realise this it looks like.
var navWrap = $('#navWrap'),
nav = $('#mapstick'),
startPosition = navWrap.offset().top,
stopPosition = $('#stopHere').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');
}
});
I just need an extra 70px on the top of the div so it can be fully visible.
I have also looked at using this;
.offset({ top: 70 });
I think I used this wrong as this just messed things up.

Turns out I can just amend another class to a child div to have the effect that I am wanting. So I have just added an extra 'addClass' to the if statement and it seems to have done the trick.
This is the script that I have now;
var navWrap = $('#navWrap'),
nav = $('#mapstick'),
maptop = $('#map')
startPosition = navWrap.offset().top ,
stopPosition = $('#stopHere').offset().top - nav.outerHeight();
$(document).scroll(function () {
//stick nav to top of page
var y = $(this).scrollTop()
if (y > startPosition) {
nav.addClass('sticky'),
maptop.addClass('maptop');
if (y > stopPosition) {
nav.css('top', stopPosition - y);
} else {
nav.css('top', 0);
}
} else {
nav.removeClass('sticky'),
maptop.addClass('maptop');
}
});
I have added in the 'maptop' to the if statement which is working. I don't know if this is the best way to do it but it is working and I am fine with that lol

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

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