Question

在my site上，当用户向下滚动时，顶部栏会消失，当用户向上滚动时，顶部栏会重新出现。这是通过简单地向顶部栏元素添加和删除类来完成的，具体取决于用户所处的滚动状态。

JS

var lastScrollTop = 0;

$(window).scroll(function(){
   var st = $(this).scrollTop();
   if (st < lastScrollTop || st === 0){
       $('#masthead').removeClass('unpinned');
   } else {
      $('#masthead').addClass('unpinned');
   }
   lastScrollTop = st;
});

CSS

.unpinned {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}

我的问题是在iOS Safari上查看网站时。当用户向下滚动时，Safari的地址栏缩小的内置功能似乎与我自己的消失/重新出现的顶栏有冲突。因此，例如，在移动设备上，当我点击底部附近的项目时，该网站应该一直滚动到顶部并打开显示项目的div。相反，当网站向上滚动时，由于Safari的地址栏放大而导致班级从顶栏移除，因此它会在中途停止。

我怎样才能确保unpinned类继续添加到#masthead元素，直到网站一直滚动到顶部？

iOS Safari地址栏会导致粘贴标题跳转

0 个答案: