I'm currently working on a website and I'm trying to implement a feature where the logo on the page changes size based on the user's scroll behavior. However, I'm facing difficulty in finding a universal formula that can adjust the logo size effectively across different monitor sizes, as opposed to manually setting coefficients for each monitor.
Below is a snippet of the code I have so far:
$(window).scroll(function() {
var scroll = window.scrollY
/*
var testDiv = document.getElementById("trade"); //this element is the limit to where the picture should be resized (should be same as clients height)
var move = testDiv.offsetTop-$(window).scrollTop()-66
console.log(move)
*/
//all in pixels (px)
var newWidth = 1024 - scroll/1.128 //this number only works for my monitor
var newHeight = 223 - scroll/5 //same here
var minWidth = 308;
if (newWidth < minWidth) {
newWidth = minWidth;
}
var minHeight = 64;
if (newHeight < minHeight) {
newHeight = minHeight;
}
$(".navbar-brand img").css({
width: newWidth + 'px',
height: newHeight + 'px'
});
});
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id = "home">
<nav class = "navbar navbar-expand-lg fixed-top">
<div class = "container-fluid">
<a href = "#home" class = "navbar-brand fixed-top" id="navbar-brand">
<img id="cover-image" src = "RECMAN-header.png" title = "home">
</a>
</div>
</nav>
<div class="dataHeight">
</div>
</div>
IMAGE SHOULD BE AT ITS SET SIZE (308x64) BEFORE HERE
<script src="https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<script src="script.js"></script>
</body>
</html>
.navbar-brand{
width: 0;
padding-top: 2px;
padding-left: .5%;
}
body{
height:2000px;
}
.dataHeight{
height: 100vh;
background-color:lightblue;
}
The goal is for the logo image to decrease in size when scrolling down and increase with scroll up. The resizing should stop once it reaches a certain point before the next element (which equals the window height). I am searching for a precise formula that can adjust the logo size uniformly across various monitor sizes. If you need more details, feel free to ask.
Thank you!