仅在桌面视图上使用粘性文本 JQuery

Question

此处编码的新内容 - 我发现此代码在您滚动时让我的文本浮动在我的图像旁边，它在桌面视图中工作得很好，但在移动设备中，文本在图像后面流动。

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

所以现在我想找出一种方法，让这段代码只适用于大于 640 像素的屏幕。我发现了这个：

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}); 
  });
);
}

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

Answer 1

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

因此您可以监听调整大小事件，如果条件匹配则使用 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; }
}

Answer 2

您不需要 java 脚本来执行此操作。这可以通过 媒体查询 轻松完成。您还可以根据您的情况更改移动视图的顶部和底部间距（默认将应用于桌面）。

就像这样：

@media only screen and (max-width: 640px) { 
   //Your code
   #sticky{
      margin: 0; //or whatever
    }
}

此代码将嵌入到与 html 文件链接的 css 中，并会在屏幕最小化为 640 像素时自动触发。

仅在桌面视图上使用粘性文本 JQuery

Using Sticky Text JQuery only on Desktop View

mobile

jquery

sticky