Question

0

270

Views

Display div based on scroll up and div from current position

I am working on small application

i want to display the div if the user scroll up to > 100px from the current position
and hide div if the user scroll down to > 50 px from current postion

example code

myID = document.getElementById("myID");

var myScrollFunc = function() {
  var y = window.scrollY;
  if (y >= 200) {
    myID.className = "bottomMenu show"
  } else {
    myID.className = "bottomMenu hide"
  }
};

window.addEventListener("scroll", myScrollFunc);

body {
  height: 2000px;
}
.bottomMenu {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  background: red;
  z-index: 1;
  transition: all 1s;
}
.hide {
  opacity: 0;
  left: -100%;
}
.show {
  opacity: 1;
  left: 0;
}

<div id="myID" class="bottomMenu hide"></div>

can any one help with code in javascript

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-04T04:31:51.636Z

Finded the way to solve this

first we want to get the scroll direction
and create two counter 1.upcounter 2. down counter
and if we start scroll up increase the upcounter and set down counter to 0
and if we start scroll dow increase the downcounter and set up counter to 0
if the up counter value reaches your value for example if reaches 100 display the div
and if the down counter reaches your value for example if reaches 50 hide the div

code example

myID = document.getElementById("myID");

function showSmartMenu() {
    // current scroll position 
    var st = window.pageYOffset || document.documentElement.scrollTop;
    // scrolling up 
    if (st < lastScrollTop) {
        upCounter += 1;
        downCounter = 0;
        if (upCounter == 100) {
            myID.className = "bottomMenu show"
        }
    } else { // scrolling down
        downCounter -= 1;
        upCounter = 0;
        if (downCounter == -50) {
            myID.className = "bottomMenu hide"

        }
    }
    lastScrollTop = st <= 0 ? 0 : st;
}
var lastScrollTop = 0;
var upCounter = 0
var downCounter = 0
window.addEventListener("scroll", showSmartMenu)

body {
  height: 2000px;
}
.bottomMenu {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  background: red;
  z-index: 1;
  transition: all 1s;
}
.hide {
  opacity: 0;
  left: -100%;
}
.show {
  opacity: 1;
  left: 0;
}

<div id="myID" class="bottomMenu hide"></div>

0

270

Display div based on scroll up and div from current position

1 answers

0

Find remote jobs

Andres GPT