一個簡單的粘頭文件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腳本的問題

回答

相關問題