一个简单的粘头文件jQuery脚本的问题

我为我的项目制作了一个粘性div元素的简单脚本，但是我在尝试将其隐藏在桌面版本上时出现问题，并在较低的视口尺寸上显示它。一个简单的粘头文件jQuery脚本的问题

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()功能试过，但没”为我工作。

我该如何实现我正在努力的目标 - 告诉它只在窗口大小（视口大小）低于940像素时才上下滑动？

在此先感谢！

来源

2015-03-31 snkv

设定溢出的CSS ..请提供codepen或的jsfiddle .. – 2015-03-31 07:41:03

http://codepen.io/anon/pen/JozQOE 这里你的代码是一支笔，但由于某种原因它不工作。 ...你是否需要以某种方式链接JS？ – snkv 2015-03-31 07:51:36

您必须通过点击JS字段的cog并选中它才能激活jQuery库。 – Shikkediel 2015-03-31 07:53:22

使用$(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

编辑 - 删除停止方法，因为它显然造成不期望的视觉效果。这里不应该是个问题，因为在150ms内不会有太多的动画集成。以为我会编辑自己，以通过一个变量保持选择器的优化。

来源

2015-03-31 08:02:53 Shikkediel

KUDOS为你的灵魂。 – snkv 2015-03-31 08:37:54

一个简单的粘头文件jQuery脚本的问题

回答

相关问题