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

Question

这里的所有编码都是新手-我发现这段代码在滚动时让我的文本漂浮在图像旁边，它在桌面视图中运行得很好，但在移动设备中，文本在图像后面流动。

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

有人能告诉我我做错了什么吗？如有任何解决方案的帮助，我们将不胜感激！

Answer 1

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

因此，您可以监听resize事件，并在条件匹配的情况下使用unstick()方法初始化或简单地取消元素。

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

---

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

#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像素时自动触发。