Hide div when scroll down only on mobile device

Question

<script type="text/javascript">
window.onscroll = function() {
    var t = document.documentElement.scrollTop || document.body.scrollTop;
    var left_bar = document.getElementById("left_bar");
    if (t >= 80 && $('wrapper').width() <= 478 ) {
        left_bar.style.display = "none";
    } else {
        left_bar.style.display = "inline";
    }
}

I am trying to hide a div when user scroll down only on mobile device. i don't want hide it on pc or tablet.

but i can't do it right..hope for help thanks

I'm curious to why you are mixing `jQuery` with pure `javascript` for this? If you have the `jQuery` library loading in why not make use of it? — NewToJS, Oct 06 '18 at 17:55
detect if the device is mobile. refer to https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery — Ercan Peker, Oct 06 '18 at 17:59
There are numerous javascript libraries for detecting mobile browsers. — Wais Kamal, Oct 06 '18 at 17:59
Possible duplicate of [What is the best way to detect a mobile device in jQuery?](https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery) — Louys Patrice Bessette, Oct 06 '18 at 18:54

score 0 · Answer 1 · answered Oct 06 '18 at 18:00

Welcome to Stack Overflow!

wrapper isn't a valid HTML tag. Therefore, just change $('wrapper') to $('.wrapper') and give a class wrapper to body element.

window.onscroll = function() {
    var t = document.documentElement.scrollTop || document.body.scrollTop;
    var left_bar = document.getElementById("left_bar");
    if (t >= 80 && $('.wrapper').width() <= 478 ) {
        left_bar.style.display = "none";
    } else {
        left_bar.style.display = "inline";
    }
}

.wrapper {
  height: 100vh;
  width: 100vw;
}
#left_bar {
  height: 200px;
  width: 200px;
  background: red;
}

<body class='wrapper'>
  <div id='left_bar'></div>
</body>

Why set a `class` name for the body tag? Why not an `ID` or simply target `$('body')`? — NewToJS, Oct 06 '18 at 19:22

Hide div when scroll down only on mobile device

1 Answers1