We Keep Coding

Opacity reduction script does not working

I have a problem with a script that until recently worked, but now seems not to want to work.
I want to reduce the opacity of the green spheres when scrolling down, it seems to be working until recently, but now I can't figure out what the problem is.
The website is this: https://attiliosantomo.com/PROVA/
The script is this:
$(document).ready(function() {
$(window).scroll(function(event) {
let scroll = $(this).scrollTop();
let opacity = 1 - (scroll / 1300);
if (opacity > 0.2) {
$('.bg-bubble').css('opacity', opacity);
}
});
});
</script>
Thank you so much for you help

The issue is that it's not the window that is scrolling. It's the .main-desktop element that is being scrolled. Targeting the scroll event of the .main-desktop as per below should solve the issue.
$(document).ready(function() {
// \/ Changed \/ selector from window to '.main-desktop'
$('.main-desktop').scroll(function(event) {
let scroll = $(this).scrollTop();
let opacity = 1 - (scroll / 1300);
if (opacity > 0.2) {
$('.bg-bubble').css('opacity', opacity);
}
});
});
html,
body {
height: 100%;
margin: 0;
}
.main-desktop {
overflow: scroll;
height: 100%;
}
.inner {
height: 3000px;
}
.bg-bubble {
height: 100px;
width: 100px;
background-color: blue;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bg-bubble"></div>
<div class="main-desktop">
<div class="inner"></div>
</div>

jQuery fixed navbar that shrinks to a smaller size on scroll is being super buggy

When using a combination of jQuery and CSS to trigger my navbar to shrink on scroll, it get's buggy when you scroll back up to a certain position, I have linked a video as an example.
I have tried two different methods. The first is using $(window).scrollTop) with an if statement and a series of .addClass and .removeClass. The second thing I have tried is using $(window).scrollTop) with a series of .css dynamic style modifications. Both of these attempts render the same end result that is shown in this video https://youtu.be/YXKsrL1cghs .
My first jQuery attempt:
$(document).ready(function () {
$(window).on("scroll", function () {
if ($(window).scrollTop() >= 40) {
$(".navbar").removeClass("py-5");
$(".navbar").addClass("compressed");
} else {
$(".navbar").addClass("py-5");
$(".navbar").removeClass("compressed");
}
});
});
My second jQuery attempt:
$(document).ready(function () {
$(window).on("scroll", function () {
if ($(window).scrollTop() >= 40) {
$(".navbar").css({ "padding-top": "10px" });
$(".navbar").css({ "padding-bottom": "10px" });
} else {
$(".navbar").css({ "padding-top": "3rem" });
$(".navbar").css({ "padding-bottom": "3rem" });
}
});
});
My CSS:
.navbar.compressed {
padding-top: 10px;
padding-bottom: 10px;
}
My expected results would be a smooth scrolling fixed navbar that shrinks to a smaller size after scrolling beyond a certain point.
What actually occurs is that when you scroll down past a certain point, for 20px worth of height, it gets super buggy and starts bouncing up and down. Once you clear those 20 or so px it's perfectly fine, but when you scroll back up it acts the same within those 20px.

When watching the video, I noticed that your .navbar has transition: all .3s. It could be the reason that when you remove the class py-5 and add class compressed, it triggers the transition twice.
It would be helpful if you can provide the HTML markup and CSS as well.

The script is manipulating the DOM quite a lot. I am not sure if this is going to fix your problem but it might be a good idea to only change the classes if the have not yet been applied.
$(document).ready(function() {
$(window).on("scroll", function() {
let navbar = $(".navbar");
if ($(window).scrollTop() >= 40) {
if (navbar.hasClass("py-5")) {
navbar.removeClass("py-5");
navbar.addClass("compressed");
}
} else {
if (navbar.hasClass("compressed")) {
navbar.addClass("py-5");
navbar.removeClass("compressed");
}
}
});
});
body {
height: 10000px;
position: relative;
}
.navbar {
width: 100%;
position: fixed;
height: 50px;
top: 0;
transition: all .3s
}
.py-5 {
background-color: blue;
padding-top: 10px;
padding-bottom: 10px;
}
.compressed {
background-color: red;
padding-top: 0px;
padding-bottom: 0px;
}
<html>
<head></head>
<body>
<nav class="navbar py-5">Navigation</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

Event AFTER scroll event stops?

So I have a box shadow that i want to add to a bar as shown in this example :
https://jsfiddle.net/eddietal2/qgLvsx2v/
this is the javascript that I have:
var topBar = document.getElementById('top-bar');
var wrapper = document.getElementById('wrapper');
wrapper.onscroll = function () {
topBar.style.boxShadow = "10px 20px 30px blue"
}
The effect I am going for is, when the user scrolls, I want the box shadow to appear, but when they stop scrolling, I want the box shadow to disappear. How can I achieve this effect?

You could use a timer to check if you have scrolled in the last N ms and call a callback after that about of time.
var wrapper = document.getElementById('wrapper')
function onScroll(element, scrolling, stopped) {
let timer = null
// bind the event to the provided element
element.addEventListener('scroll', function (e) {
// use a class to switch the box-shadow on
element.classList.add('scrolling')
if (typeof scrolling === 'function') {
scrolling.apply(this, arguments)
}
// clear the existing timer
clearTimeout(timer)
// set a timer for 100 ms
timer = setTimeout(() => {
// if we get in here the page has not been scrolled for 100ms
// remove the scrolling class
element.classList.remove('scrolling')
if (typeof scrolling === 'function') {
stopped.apply(this, arguments)
}
}, 100)
})
}
// call the function
onScroll(wrapper,
function scrolling(e) {
e.target.classList.add('scrolling')
},
function stopped(e) {
e.target.classList.remove('scrolling')
}
)
* {
box-sizing: border-box;
}
#wrapper {
height: 200px;
padding: 2em;
overflow: auto;
transition: .4s box-shadow;
}
#wrapper.scrolling {
box-shadow: 0px 0px 60px blue inset;
}
#topBar > div {
background: #eee;
height: 200px;
width: 200px;
margin-bottom: 1em;
position: relative;
transition: .4s all;
}
#wrapper.scrolling #topBar > div {
transform: perspective(1200px) translateZ(20px);
box-shadow: 2px 2px 10px #777;
}
<div id="wrapper" class="">
<div class="" id="topBar">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
</div>

There is not 'scrollstop' event. You need to identify when the user stops scrolling yourself.
When the user scrolls, start a timer for a few dozen milliseconds (you'll have to play with this value), and clear any existing timers. When the timer reaches 0, call your function.

Onscroll is easy to monitor to apply the shadow but removing the shadow is the tricky part and the best I could think of was the event mouseout...
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
width: 200px;
height: 100px;
overflow: scroll;
}
</style>
</head>
<body>
<div onmouseout="this.style.boxShadow='none';" onscroll="this.style.boxShadow='10px 20px 30px blue';">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</div>
</body>
</html>

Vanilla JS Box Shadow on Scroll

I've been learning vanilla JS and most of the solutions to this problem are jquery dependent and I find myself getting a little muddled. (This is not a js over jq argument I am looking for a specific solution).
I am attempting to create a box shadow that activates on a fixed position menu as it scrolls.
If I capture the header element in a variable,
var header = document.getElementById("header");
and then add the scroll event to it:
header.onscroll = function(){};
What am I checking for at this point? The y-offset?

This should help
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("fixedMenu").className = "myFixedMenu-box-shadow";
} else {
document.getElementById("fixedMenu").className = "myFixedMenu";
}
}
body{
height: 900px;
}
.myFixedMenu{
width : 100%;
height: 70px;
background-color: black;
position: fixed;}
.myFixedMenu-box-shadow{
width : 100%;
height: 70px;
background-color: orange;
position: fixed;
box-shadow: 0px 0px 5px 5px #e1e1e1;
}
<div class="myFixedMenu" id="fixedMenu">
Some Menu Item
</div>

your code is binding to the onscroll event of header but based upon what you've explained, you could bind to to the onscroll event of the body and check for window.scrollY
http://mdn.io/scrollY

Sliding a div from right > to left <

I have been searching for a code snippet that I assumed would already be out there somwhere. There are many different variations that I have found but none of which are best suited for me. I have attempted to modify jsfiddles ive found and tweak other examples but to no avail.
As I have little to no prior experience with javascript and Jquery languages I hoped someone on here could help.
In my current project I have a single page in which all the content is loaded. currently I have six divs all hidden off screen to the right. with a vertical navigation menu sitting on the left. What I want is for when a link with the assigned div is clicked, that targeted div slides on screen from right to left and stops next to the navigation menu.
The twist, however is when a new link is clicked the content of the previous div to slide off screen allowing the newely selected div to replace it.
Hopefully I have explained myself well enough.
The content divs I want slided are =
id="content-one"
id="content-two"
and so on.
Any solutions or pointers in the right direction would be extreamly usefull many thanks in advance.
This is what i was originally trying to modify but i was unsuccessful...
$(document).ready(function(){
$("#navigation li a").on("click", function(e){
e.preventDefault();`enter code here`
var hrefval = $(this).attr("href");
if(hrefval == "#content-one") {
var distance = $('#container').css('right');
if(distance == "auto" || distance == "0px") {
$(this).addClass("open");
activateSlider();
} else {
deactivateSlider();
}
}
}); // end click event handler
// $("#closebtn").on("click", function(e){
// e.preventDefault();
// closeSidepage();
// }); // end close button event handler
function activateSlider() {
$('#container').animate({
right: '350px'
}, 400, 'easeOutBack');
}
function deactivateSlider(){
$("#navigation li a").removeClass("open");
$('#container').animate({
right: '0px'
}, 400, 'easeOutQuint');
}
});

Try like this,
Here .panel your sliding div class
JS Fiddle
$(document).ready(function() {
var settings = {
objSlideTrigger: '#trigger', // link button id
objSlidePanel: '.panel' // slide div class or id
}
$(settings.objSlideTrigger).on('click', function() {
//If the panel isn't out
if (!$(settings.objSlidePanel).hasClass('out')) {
slidePanelOut();
} else if ($(settings.objSlidePanel).hasClass('out')) {
slidePanelIn();
}
});
function slidePanelOut() {
//Animate it to left
$(settings.objSlidePanel).animate({
'right': '-67%'
});
//Add the out class
$(settings.objSlidePanel).addClass('out');
}
function slidePanelIn() {
//Otherwise, animate it back in
$(settings.objSlidePanel).animate({
'right': '-89%'
});
//Remove the out class
$(settings.objSlidePanel).removeClass('out');
}
});
.panel {
width: 85%;
padding: 2%;
position: fixed;
right: -89%;
top: 46px;
z-index: 2;
background: #2F2F2F;
box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
border-radius: 1% 1% 1% 1%;
border-radius: 5px;
}
.trigger {
width: 8%;
text-align: center;
color: goldenrod;
position: absolute;
top: 26px;
padding: 0.5% 0%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
background: #2F2F2F;
right: 30%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="panel" class="panel">
<!-- Trigger -->content
</div>
<a id="trigger" class="trigger">click here</a>