Javascript 如何防止图像在移动应用程序中滚动时移动

我正在开发一个移动应用程序。我使用JavaScript编写代码和一些jQuery mobile（1.4.5）。 我的问题是，当我滚动时，我的图像跟随滚动。我在网络版本中没有这个问题，但是在我的手机上，图像没有被修复。当我在任何设备上滚动时，我希望我的图像固定在我想要的特定位置。 让我简单解释一下我的代码：

• 当我打开我的应用程序时，一些图像出现在它们的位置。为此，我仅使用：

这很好，即使在移动应用程序中，此图像也会保持不变

• 后来，其他的照片也出现了。为此，我使用以下函数：

然后调用图像：

然后，当我滚动时，此图像在移动设备上不再固定（在网络上工作正常）-(

• 所以，我尝试了这个CSS来粘贴图像，以阻止它移动

粘乎乎的{
职位：-网络工具包粘性；
位置：粘性；
}

在Javascript中，我使用相同的函数im2:

im2（w，etc）{x.setAttribute（“class”，w）；etc}

然后，我调用如下函数：

im2（“粘滞”，“js/image2.jpg”，“位置：固定；顶部：210px；左侧：165px”，“280”，“35”）和…没有粘滞

我认为这是因为jqm层给出了这个意外的结果。

---

那么，我应该怎么做/写呢？

出于一些未知的原因，它可以工作……图像保持不变……现在

当我从一个页面浏览到另一个页面时，问题仍然存在。在另一篇文章中，我发现这个解决方案听起来很有希望。我不能直接与用户交谈，也不能发表评论，因为我还有两个小时的路程。这是jQuery代码，应该可以使用，但我没有。 我应该把这条线放在哪里

$('img').on('dragstart', function(event) { event.preventDefault(); });

以下是我使用的刷卡脚本：

<script>
$(document).on('swipeleft', '.ui-page', function(event){    
    if(event.handled !== true) // This will prevent event triggering more then once
    {    
        var nextpage = $.mobile.activePage.next('[data-role="page"]');
        // swipe using id of next page if exists
        if (nextpage.length > 0) { 
            $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
        }
        event.handled = true;
    }
    return false;         
});

$(document).on('swiperight', '.ui-page', function(event){     
    if(event.handled !== true) // This will prevent event triggering more then once
    {      
        var prevpage = $(this).prev('[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
        }
        event.handled = true;
    }
    return false;            
});

$（文档）.on（'swipleft'，'.ui页'，函数（事件）{
if（event.handled！==true）//这将防止事件触发多次
{    
var nextpage=$.mobile.activePage.next（'[data role=“page”]'）；
//如果存在，请使用下一页的id刷卡
如果（nextpage.length>0）{
$.mobile.changePage（下一页，{transition:“slide”，reverse:false}，true，true）；
}
event.handled=true；
}
返回false；
});
$（文档）.on（'swiperight'，'.ui页'，函数（事件）{
if（event.handled！==true）//这将防止事件触发多次
{      
var prevpage=$（this.prev（'[data role=“page”]'）；
如果（prevpage.length>0）{
$.mobile.changePage（prevpage，{transition:“slide”，reverse:true}，true，true）；
}
event.handled=true；
}
返回false；
});

你能让这段代码在一段代码中运行吗？很抱歉，我不知道怎么做……我写的所有内容都是想说，我想在我的手机中滚动时修复我的图像。你可以编辑像这样的JSFIDLE，看看你能走多远。这里有一个相关的问题，你会注意到有多少人在一个JSFIDLE贴出了他试图回答自己问题的帖子。此外，随着时间的推移，你可以更新你的小提琴。不要担心你的第一次尝试看起来很疯狂。事实上，现在我的主要问题是在刷卡时修复图像，正如我在下面描述的那样。我会更深入地分析问题，可能不是刷卡本身t图像加载到我的3页，而不是我想要的一页（中间页）。请问该怎么办？可能是我的函数im2没有被修改？或者我必须在函数或刷卡代码中添加一些东西？我已经更深入地分析了这个问题，可能不是刷卡本身，而是图像加载到了我的3页，而不是我想要的一页（中间页）。请问该怎么办？可能是我的函数im2不适用？或者我必须在函数中添加一些内容或刷卡代码？

$('img').on('dragstart', function(event) { event.preventDefault(); });

<script>
$(document).on('swipeleft', '.ui-page', function(event){    
    if(event.handled !== true) // This will prevent event triggering more then once
    {    
        var nextpage = $.mobile.activePage.next('[data-role="page"]');
        // swipe using id of next page if exists
        if (nextpage.length > 0) { 
            $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
        }
        event.handled = true;
    }
    return false;         
});

$(document).on('swiperight', '.ui-page', function(event){     
    if(event.handled !== true) // This will prevent event triggering more then once
    {      
        var prevpage = $(this).prev('[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
        }
        event.handled = true;
    }
    return false;            
});