Question

我为我的项目制作了一个简单的粘贴div元素脚本，但是我在尝试将其隐藏在桌面版本上并在较低的视口大小上显示时遇到了问题。

Codepen - http://codepen.io/anon/pen/JozQOE

这是我的HTML摘要：

<header id="hiddenHeader">
 <a href="tel:02034045556" class="request-call">call <b>now</b><br>☎ 020 3404 5556</a>
</header>
<div id="content">
   CONTENT
</div>

这是我的jQuery脚本

<script>
  $(document).ready(function() {
        $('#hiddenHeader').hide();

        $(window).scroll(function() {
          if ($(window).scrollTop() > 150) { $('#hiddenHeader').slideDown(150);
          }
          if ($(window).scrollTop() < 150) { $('#hiddenHeader').slideUp(150);
          }
        });
  });
  </script>

我尝试使用$(window).width()和.resize()函数，但它对我来说没有用。

我如何实现我所追求的目标 - 例如，当窗口大小（视口大小）低于940px时，告诉它上下滑动？

提前致谢！

Answer 1

使用$(window).width()已证明对我来说非常可靠：

$(document).ready(function() {

var available = $(window).width();
var header = $('#hiddenHeader');
header.hide();

$(window).scroll(function() {
if (available < 940) {
if ($(window).scrollTop() > 150) header.slideDown(150);
else header.slideUp(150);
}
});

$(window).resize(function() {available = $(this).width()});
});

http://codepen.io/anon/pen/PwLrxx

编辑 - 删除了停止方法，因为它显然导致了不良的视觉效果。这不应该是一个问题，因为只有150毫秒不会有太多的动画积累。以为我会编辑自己以通过变量保持选择器的优化。

一个简单的粘性标头jQuery脚本的问题

1 个答案: