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.

make div scoll untill it reaches top of page then fixed

let's get straight to the point:
My code looks like the following:
<div id="keep_up">
<div id="thread_menu">
<div id="new_thread">
</div>
</div>
</div>
And my css:
#keep_up {
position: fixed;
width: 13%;
}
#thread_menu{
height: 80vh;
width: 100%;
float: left;
position: relative;
}
Now i use this for a forum. and this is basically to show the active and new threads on the side of the screen.
However. When watching a thread, the header disappears (Wich makes sense because we are scrolling down).
but i want the thread menu to stay on my side (So that it is always visible). In this case that is happening because my keep_up div has position: fixed. But i only see half of the thread menu becuase it is too long and won't scroll up.
My question:
I want the thread menu to scroll up, untill it reaches the top of my window. From then on i want it to stay there.
How do i do this?
I saw a few examples but none of them worked for me.
EDIT: Code i tried:
<script src="jquery.min.js">
$(window).scroll(function () {
var margin = null;
$(window).on("scroll", function () {
var scrollHeight = $(document).height(),
scrollTop = $(window).scrollTop(),
offsetBottom = 110, // Offset depending on the height of the footer
offsetTop = 100, // Offset depending on the height of the header
positionTop = $(".keep_up").offset().top,
affix;
if (margin != null && (scrollTop + margin <= positionTop)) {
// The sidebar has reached the bottom and is still on the bottom
affix = false;
} else if (positionTop + $(".keep_up").height() >= scrollHeight - offsetBottom) {
// The sidebar has reached the bottom
affix = 'bottom';
} else if (scrollTop <= offsetTop) {
// The sidebar has reached the top
affix = 'top';
} else {
// The sidebar is midway
affix = false;
}
// If the sidebar hasnot changed his state, return;
if ($(".keep_up").hasClass('at' + (affix ? '-' + affix : ''))) return;
if (affix == 'bottom') {
margin = positionTop - scrollTop;
} else {
margin = null;
}
// If the related class is added to the div
$(".keep_up").removeClass('at at-top at-bottom').addClass('at' + (affix ? '-' + affix : ''))
});
});
</script>
And the CSS:
.keep_up{
/*position: fixed;*/
width: 13%;
}
.keep_up.at {
top: 1px;
position: fixed;
}
.keep_up.at-top{
}
.keep_up.at-bottom {
top: 438px;
position: absolute;
}

modify this on HTML:
<div id="prevent"></div>
<div id="keep_up" data-spy="affix" data-offset-top="200">
Add this CSS:
.affix{position: fixed !important; top:0px; z-index:999;}
.affixpatch{margin-top:100px !important;}
this will fix the div when you scroll down 200px. Change data-offset-top value to reach it on different break point.
.affixpatch is a class that will be loaded with next jquery function. it prevents to hide content behind top fixed div. Change margin-top to another value if this don't solves the "hide content" problem that always generate affixing divs.
<script>
$(function() {
//caches a jQuery object containing the header element
var header = $(".affix");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
$('#prevent').addClass("affixpatch");
} else {
$('#prevent').removeClass("affixpatch");
}
});
});
</script>
Hope it helps. If not, you may have some class that rewrite or impede the correct function of this affix.
I've tested this hundreds of times, usually to fix navbars.
SCROLL:
Using overflow to scroll content:
#keep_up{
max-height:400px;
width: auto;
overflow:auto;}
This will scroll the content inside #keep_up div (or use it in another one)
NOTE: you must declare a fixed max height for this div. Set max-width only if you need.
You can use %, em, rem... no need to be px for fix the max witdth. (to get a responsive effect, use responsive measurements)

If I understand your scenario correctly, the way to do this might be to use jQuery (or native JS, but you've tagged jQuery so I'm assuming that's in play).
There's a plugin that handles this kind of thing: http://leafo.net/sticky-kit/
I'd suggest you look at the plugin source code to see how it works - an event handler function on $(window).scroll() which then toggles classes on your #thread_menu to fix it in place. To keep your code lightweight, you probably don't need everything the plugin provides.

Styling the default scrollbar on the right

Hi I have been trying for the last hour to change the way the default scrollbar looks on browser.I am talking about the main scrollbar on the right not ading a new one and styiling it.I am using the jScrollPane plugin but it does not seem to work or I am not doing something right.Here is my code:
$("window").jScrollPane();
window
{
width: 100%;
overflow: auto;
}
window
{
height: auto;
}

If you go to the website that A.K. has linked, you will see the necessary Jquery and CSS for this to work. I have made them easier to understand for you.
$(function()
{
var win = $(window);
// Full body scroll
var isResizing = false;
win.bind(
'resize',
function()
{
if (!isResizing) {
isResizing = true;
var container = $('#full-page-container'); //this should be the most parent
// div, right beneath the <body> and covering the entire page. Change the ID HERE.
// Temporarily make the container tiny so it doesn't influence the
// calculation of the size of the document
container.css(
{
'width': 1,
'height': 1
}
);
// Now make it the size of the window...
container.css(
{
'width': win.width(),
'height': win.height()
}
);
isResizing = false;
container.jScrollPane( //this is where outer scroll changes
{
'showArrows': true
}
);
}
}
).trigger('resize');
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if ($('#full-page-container').width() != win.width()) {
win.trigger('resize');
}
/*Internal scrollpanes. (Not needed if you want to change only the outer)
$('.scroll-pane').jScrollPane({showArrows: true});
*/
});
Now CSS:
html
{
overflow: auto;
}
#full-page-container
{
overflow: auto;
}
/*** Optional INNER scrolls.
.scroll-pane
{
width: 100%;
height: 200px;
overflow: auto;
}
.horizontal-only
{
height: auto;
max-height: 200px;
}
***/
Don't forget to include Jquery, jscrollpane.css, mousewheel.js, jscrollpane.js

Position fixed when scrolled passed certain amount of pixels

I'm looking for a way to position the #header element of my page as "Fixed" only after having scrolled downward for about 170 pixels.
Above the header is a banner, so when people scroll down, I would like the banner to scroll away, the header to stay fixed when it hits the top of the window, and the page content to scroll underneath the header.
http://jsfiddle.net/tdskate/zEDMv/

This is the general idea although you may want to fudge around with the css a bit.
var header = $("#header");
$(document).scroll(function(e) {
if($(this).scrollTop() > $("#banner").height()) {
header.css({"position" : "fixed", "top" : "0"});
} else {
header.css("position", "relative");
}
});

You need to check for the different scroll positions:
var $header = $('#header'),
headerPos = $header.position().top,
$win = $(window);
$win.scroll(function() {
if ( $win.scrollTop() >= headerPos) {
$header.css({
'position':'fixed',
'top':0,
'width': '100%'
});
}
if ( $win.scrollTop() <= headerPos ) {
$header.css({
'position': 'static'
});
}
});
http://jsfiddle.net/DOSBeats/zEDMv/10/

Here's a slightly more concise version:
var header = $('#header'),
bannerHeight = $('#banner').height(),
win = $(window);
win.scroll(function() {
header.css({ top: Math.max(Number(win.scrollTop() - bannerHeight), 0) });
});

Here is a demo of a jquery plugin that takes care of this. Similar to John's answer above, but the plugin takes the solution a bit farther.
Demo: http://jsfiddle.net/ZczEt/
Plugin and source: https://github.com/bigspotteddog/ScrollToFixed
Usage:
$(document).ready(function() {
$('.header').scrollToFixed();
});

I think this should work: http://jsfiddle.net/Skooljester/K2mFT/. However, you'll need to define a width on your header or else it'll shrink when it becomes fixed.

lock a div on header when window scrolled past element

I want a circle div to lock in the header when the user scrolls past in.
I'm using the following code but it doesn't work
var circle$ = $('.circle'),
oCircleBottom = circle$.offset().top + circle$.outerHeight(true),
window$ = $(window);
window$.scroll(function() {
if (window$.scrollTop() > oCircleBottom) {
}
}.bind(this));
I want to perform an action when the user scrolls pass the circle div; however, the code above does not seem to work. Is oCircleBottom computed correctly?

Enclose your code in $(document).ready function
$(document).ready(function () {
var circle$ = $('.circle'),
oCircleBottom = circle$.offset().top + circle$.outerHeight(true),
window$ = $(window);
window$.scroll(function () {
if (window$.scrollTop() > oCircleBottom) {
$('.circle').css({
position: 'fixed',
top: '0',
left: '0'
});
}
else{
$('.circle').css({
position: 'static'});
}
}.bind(this));
});

You need to take window height into account because if the height of the page isnt enough to scroll down, your code doesnt work. Take a look at this example
However, if the increase page height, you code will work fine without subtracting window height. Take a look at this example
Hence, its better to subtract the window height. jsFiddle
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('.circle').offset().top + $('.circle').innerHeight() - window.innerHeight) {
//Do you stuff
}
});