时间戳

首页 > 解决方案 > 仅在桌面视图上使用 Sticky Text JQuery

jquery - 仅在桌面视图上使用 Sticky Text JQuery

问题描述

在这里编码的所有东西都是新的——我发现这段代码可以让我的文本在你滚动时漂浮在我的图像旁边，它在桌面视图中工作得很好，但在移动设备中，文本在图像后面流动。

<script>
  $(document).ready(function(){
    $("#sticky").sticky({topSpacing:10}); 
    $("#sticky").sticky({bottomSpacing:1450}); 
  });
</script>

所以现在我试图找出一种方法，让这段代码只在大于 640px 的屏幕上工作。我找到了这个：

if(window.outerWidth < 640) {
  alert('your jquery code here - it fires for mobile device only');
}

但是当我把它放在一起，并将它从小于 640 更改为大于 - 代码不起作用：

if(window.outerWidth > 640) {
  alert(  $(document).ready(function(){
    $("#sticky").sticky({topSpacing:10}); 
    $("#sticky").sticky({bottomSpacing:1450}); 
  });
);
}

谁能告诉我我做错了什么？任何有关解决方案的帮助将不胜感激！

标签： jquerymobilesticky

解决方案

代码将在页面加载时初始化，在调整窗口大小时不会发生任何事情，因为您没有在监听该事件并且它在页面加载后已经初始化。

因此，您可以收听调整大小事件，如果条件匹配，则初始化或简单地使用unstick()方法取消粘贴元素。

$(window).resize(function() {
 if(window.outerWidth > 640) {
    $("#sticky").sticky({topSpacing:10, bottomSpacing:1450}); 
 } else{
    // unstick the element
    $("#sticky").unstick()
 }
}).resize();

或者您可以使用 css 媒体查询在 2 个元素之间切换。

#sticky { display:block; }
#stickyMob { display:none; }

@media only screen and (max-width: 640px) {
  #sticky{ display: none;}
  #stickyMob { display:block; }
}

推荐阅读