Hide first div and show second div after 500px scroll up . Second div content reload every 20 second
first page create index.html
copy and paste given code in index.html .
in load.php reload content . load.php reload every 20 second and content show in index.html second div.
<----- index.html start here --- >
<style>
#first-div {
display: none;
max-width:300px;
width:100%;
overflow:hidden;border:1px solid green;margin-right:10px;
}
#second-div {
display: none;
position: fixed;
top: 90px;
right:0;
max-width:300px;
width:100%;
z-index:999;
float:right;overflow:hidden;border:1px solid green;margin-right:10px;
}
</style>
<div id="first-div">
Your first div content here
</div>
<div id="second-div">
Your second div content here
</div>
<script>
let reloadInterval;
const firstDiv = document.getElementById('first-div');
const secondDiv = document.getElementById('second-div');
function startReloading() {
if (!reloadInterval) {
reloadInterval = setInterval(() => {
fetch('load.php')
.then(response => response.text())
.then(data => {
secondDiv.innerHTML = data;
console.log('Loaded:', data);
})
.catch(error => console.error('Error:', error));
}, 18000);
}
}
function stopReloading() {
if (reloadInterval) {
clearInterval(reloadInterval);
reloadInterval = null;
}
}
function handleScroll() {
if (window.scrollY > 500) {
firstDiv.style.display = 'none';
secondDiv.style.display = 'block';
startReloading();
} else {
firstDiv.style.display = 'block';
secondDiv.style.display = 'none';
stopReloading();
}
}
window.addEventListener('scroll', handleScroll);
// Initial check in case the page is already scrolled down
handleScroll();
</script>
