Question

我遇到了jquery的一个奇怪问题（主要是在firefox和IE9中）。情况就是这样。我有一个水平滚动网站，根据您的滚动位置和内容部分，右上角的图像会发生变化，以便用户知道他在哪个部分。根据用户窗口宽度，通过jquery计算图像更改的滚动位置。我在菜单上有一个缓动，所以它的动画从一个部分到另一个部分以及右上角的我的图像在开始时被预加载并且也是硬编码的（http://karpouzaki.com/easing/img/image.png）在我的CSS和jquery函数发生的图像替换。这就是我头脑中的内容：

<link media="screen" type="text/css" href="css/reset.css" rel="stylesheet">
<link media="screen" type="text/css" href="css/style.css" rel="stylesheet">
<link media="screen" type="text/css" href="fonts.css" rel="stylesheet">
<link href="css/media-queries.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type='text/javascript' src="js/jquery.easing.1.3.js"></script>
<script type='text/javascript' src="js/hscroll.js"></script>
<script type="text/javascript" src="js/function.js"></script>
<script type="text/javascript" src="yoxview/yoxview-init.js"></script>
<script type="text/javascript">

$.each(["http://karpouzaki.com/easing/img/naboutus.png","http://karpouzaki.com/easing/img/nwhatwedo.png","http://karpouzaki.com/easing/img/ntheory.png","http://karpouzaki.com/easing/img/nportfolio.png","http://karpouzaki.com/easing/img/nclients.png","http://karpouzaki.com/easing/img/ncontacts.png"],function(i,url){
var img = new Image();
img.src = url;
});   
$(window).load(function(){
sitewidths();
    scpos();
multibgpos();
$(window).resize(function() {
    sitewidths();
    scpos();
multibgpos();
})
.resize();//trigger the resize event on page load
});
</script>

这些是我的函数，其中页面的宽度与图像替换的滚动位置以及内容部分之间的动画一起计算

$(function() {
    $('div.navigation a , div.footleft a' ).bind('click',function(event){
        var $anchor = $(this);

        /*if you want to use one of the easing effects:
        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, 1500,'easeInOutExpo');
        */ 
        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, 1500,'easeInOutExpo');
        event.preventDefault();
    });
});
var scpos = function(){
$(window).scroll(function(){
    var wwidth = $(window).width();
    var spos1 = wwidth - 355;
    var spos2 = spos1+wwidth;
    var spos3 = spos2 + wwidth;
    var spos4 = spos3 + wwidth + $('.rightporto').width();
    var spos5 = spos4 + wwidth + $('.leftclients').width();
    if(($(window).scrollLeft() >= 0)&& ($(window).scrollLeft() < spos1)){
                $(".step").css('background','url(http://karpouzaki.com/easing/img/naboutus.png) 94% 5% no-repeat fixed');
              } else if(($(window).scrollLeft() >= spos1)&& ($(window).scrollLeft() < spos2)){
                  $(".step").css('background','url(http://karpouzaki.com/easing/img/nwhatwedo.png) 94% 5% no-repeat fixed');
              } else if(($(window).scrollLeft() >= spos2 )&& ($(window).scrollLeft() < spos3)){
                  $(".step").css('background','url(http://karpouzaki.com/easing/img/ntheory.png) 94% 5% no-repeat fixed');
              } else if(($(window).scrollLeft() >= spos3)&& ($(window).scrollLeft() < spos4)){
                  $(".step").css('background','url(http://karpouzaki.com/easing/img/nportfolio.png) 94% 5% no-repeat fixed');
              } else if(($(window).scrollLeft() >= spos4)&& ($(window).scrollLeft() < spos5)){
                  $(".step").css('background','url(http://karpouzaki.com/easing/img/nclients.png) 94% 5% no-repeat fixed');
              }else {
                  $(".step").css('background','url(http://karpouzaki.com/easing/img/ncontacts.png) 94% 5% no-repeat fixed');
              } 
        });
};
var sitewidths = function(){
$(function(){
    var dwidth = $(window).width();
    var dportowidth = dwidth + $('.rightporto').width();
    var dclientwidth = dwidth + $('.rightclients').width();
    var cw = $(".rightclients").width();
    var bdwidth = (dwidth * 4) + dportowidth + dclientwidth;
    var mrportclients = Number(($(window).width() * 0.05)); 
        $('body').css("width" , bdwidth);
        $(".multiplebgs .habout").css("width",dwidth);
        $(".multiplebgs .hwhatwedo").css("width",dwidth);
        $(".multiplebgs .htheory").css("width",dwidth);
        $(".multiplebgs .hportfolio").css("width", dportowidth);
        $(".multiplebgs .hclients").css("width", dclientwidth);
        $(".multiplebgs .hcontacts").css("width",dwidth);
        $(".portofolio").css("margin-right" , mrportclients); 
        $('#content4 .cbox').css('margin-right' , mrportclients);
        $(".clients").css("margin-right" , mrportclients);
        $('#content5 .cbox').css('margin-right' , mrportclients);
    });
};
var multibgpos = function(){
$(function(){
    var pwwidth = $(window).width();
        var pwheight =  $(window).height();
    var bg1posx = $('.leftporto').outerWidth() - $('.portofolio').width();
    var hawd = ($(window).width() * 0.05);
    var wasd =  $('.yoxview').css('margin-top').replace('px', '');
    var bg1posy = pwheight - $('.footer').height();
    var bg2posx = $('.leftporto').outerWidth() - Number(($(window).width()) * 0.05);

    var bg2posy =  Number(hawd) + Number(wasd);     
$('#content4').css('background-position', bg1posx+'px '+'bottom, '+bg2posx+'px '+bg2posy+'px ');
    });
};

网站已开启：

http://karpouzaki.com/easing/

我已将window.load更改为document.ready仍然相同。我以为这是我的导航链接上的动画仍然没有。我有一个mousescroll水平滚动但我没有使用鼠标滚动问题发生所以我排除了。在我看来，用户会话到期并强制再次重新加载bg图像，这就是为什么消失或我的功能有问题。

有人有任何建议吗？

由于

Answer 1

更改了我的功能并将其直接添加到标题而不是外部功能表，问题自行修复。谢谢你的帮助

jquery问题图像有时会在窗口滚动功能上消失

1 个答案: