Develop Reference

JQuery and Elementor Sticky Header Not Working Properly

Site URL: https://petnotify.sporksquad.com/
I'm building a website for a client, and I built two stacked containers within it. I want only the bottom half with the navbar to be sticky and have the disappear / reappear feature. It works perfectly until I scroll up too quickly and the bottom part overtakes the top container with the logo and social icons. I would love to prevent this from happening and
properly stopping below the top container when you reach the top of the page.
I followed this tutorial and this is my Elementor set-up. The code I used is
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($) {
var mywindow = $(window);
var mypos = mywindow.scrollTop();
let scrolling = false; /* For throlling scroll event */
window.addEventListener('scroll', function() {
scrolling = true;
});
setInterval(() => {
if (scrolling) {
scrolling = false;
if (mypos > 20) {
if (mywindow.scrollTop() > mypos) {
$('#stickyheaders').addClass('headerup');
} else {
$('#stickyheaders').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
}
}, 300);
});
});
</script>
<style>
#stickyheaders{
transition : transform 0.4s ease;
}
.headerup{
transform: translateY(-20vh); /*adjust this value to the height of your header*/
}
</style>
I've tried messing around with the vh for the height of header (each container is 10vh so the header is 20vh). Not sure what else to do as I'm not super familiar with jQuery but I'm sure it's an easy fix.

How to make the horizontal scroll and section sticky

I have tried to achieve the horizontal scroll with mcustomscrollbar plugin but I want something how this website is doing https://www.happymaven.co.uk/ on the benefits fold, how can I make it sticky and unsticky after the scroll is done.
var stickytl = $('.tl-section').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > stickytl) {
$('.tl-section').removeClass('noscrolltl');
$('.tl-section').addClass('scrolltl');
}
else {
$('.tl-section').removeClass('scrolltl');
$('.tl-section').addClass('noscrolltl');
}
});

Jquery Hide header at first and show it on scroll up

Here’s a demo page.
https://codyhouse.co/demo/full-screen-pop-out-navigation/index.html
How to hide the header when the screen is on the top of the page, and it will only show on scroll up

hi try following...
$(window).scroll(function() {
var _hideVal = 50; //You can change this value...
if ($(window).scrollTop() > _hideVal)
{
$('.header-holder').fadeIn();
}
else
{
$('.header-holder').fadeOut();
}
});

Navbar add class after div scrolls with jQuery

I have problems adding a class to the navigation after scrolling to get a fixed class. My website has a video in the background and only the <div> with the .wrap class can scroll all the content. When scrolling I would like the navigation to be fixed on top.
This is my Javascript code:
$(document).ready(function() {
var navpos = $('.navbar').offset();
console.log(navpos.top);
$(window).bind('scroll', function() {
if ($(window).scrollTop() > navpos.top) {
$('.navbar').fadeIn(500).addClass('fixed-top');
}else {
$('.navbar').removeClass('fixed-top');
}
});
});
But the problem is that the body is in fixed position and only the content wrap is actually scrolling. How do I fix this?

Bind the scroll to the wrapper
$(document).ready(function() {
var navpos = $('.navbar').offset();
console.log(navpos.top);
$(window).bind('scroll', function() {
if ($('.wrapper').scrollTop() > navpos.top) {
$('.navbar').fadeIn(500).addClass('fixed-top');
}else {
$('.navbar').removeClass('fixed-top');
}
});
});

Static top navigation bar shows only after scrolling

I have a nav bar that stays on top after scrolling, but if you hit the back button or a link like so ...com/index#downbelow the nav bar does not appear until you scroll.
How can I get the nav bar to show no matter what?
var num = 60;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menutop').addClass('fixed');
} else {
$('.menutop').removeClass('fixed');
}
});
jsfiddle

In url when there are # not triggered scroll events. therefore menu will not be fixed. Add this code to top of my-jquery.js
var ssss=$(document).scrollTop();
if(ssss>=60) $('.menutop').addClass('fixed');

If you want it to always be fixed just remove that JavaScript and add the fixed class in the HTML.
<nav class="menutop fixed">

You can run it once on DOM-ready, then bind to scroll:
var toggleMenuVisibility = function() {
var num = 60;
if ($(window).scrollTop() > num) {
$('.menutop').addClass('fixed');
} else {
$('.menutop').removeClass('fixed');
}
}
$(function() {
toggleMenuVisibility();
$(window).bind('scroll', toggleMenuVisibility)
})