Javascript 如何在点击移动设备上更改横幅位置？

我的问题是-- 我在一个网站上创建了一个顶栏横幅，它可以通过“桌面悬停”很好地下拉。在手机上，当你点击横幅时，横幅会向下拉，如果你在页面上点击，横幅以外的任何地方，横幅就会向上浮动。我需要的横幅消失备份时，你再点击它，而不是必须点击页面，使它消失

这是我当前的css：

    aside.banner-container {
width: 100%;
height: 150px;
background: #000;
border-bottom: 1px solid rgba(255,255,255,0.6);
position: absolute;
top: -135px;
cursor: pointer;
margin: 0px auto;
padding-bottom: 10px;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
transition: top 1s ease;
z-index: 999;
    }
    .banner-container:hover, .banner-container:focus, .banner-container:active {
position: absolute;
top: 0px;
  }

JSP页面，如果这有区别的话。通过研究，我可以在Javascript中看到onClick事件，但是如果我告诉定位为“top:-135px”onClick，那么在移动设备上首先下拉横幅所需的初始点击不会弄乱吗？或者不，因为从技术上讲这是悬停？

var elem=document.querySelector（'.banner'）；
elem.onclick=函数（）{
if（elem.classList.contains（'clicked'））
{
元素setAttribute（'class'，'banner'）；
elem.style.top='-260px'；
}
其他的
{
elem.setAttribute（'class'，'banner clicked'）；
elem.style.top='0'；
}
}

*{
保证金：0；
填充：0；
框大小：边框框；
过渡：全部缓进缓出0.400秒；
}
正文，html{
宽度：100%；
身高：100%；
}
.banner ct{
位置：相对位置；
宽度：100%；
高度：300px；
}
.横幅{
位置：绝对位置；
顶部：-260px；
左：0；
宽度：100%；
身高：100%；
颜色：#fff；
文本对齐：居中；
垂直对齐：中间对齐；
光标：指针；
背景：#000；
}
.banner p{
位置：绝对位置；
底部：10px；
宽度：100%；
字体大小：40px；
文本对齐：居中；
}