Question

我有一个水平滑动网站。根据您的滚动位置，我有图像交换，以显示您在页面上的位置。我希望能够根据屏幕分辨率（浏览器调整大小）更改滚动位置，如果图像声明交换。我的代码是：

 $(window).scroll(function(){
             if(($(window).scrollLeft() >= 0)&& ($(window).scrollLeft() <= 1040)){
                  $(".wrapper").css('background','url(img/naboutus.png) 95% top no-repeat fixed');
              } else if(($(window).scrollLeft() >= 1041)&& ($(window).scrollLeft() <= 2840)){
                  $(".wrapper").css('background','url(img/nwhatwedo.png) 95% top no-repeat fixed');
              } else if(($(window).scrollLeft() >= 2841)&& ($(window).scrollLeft() <= 4640)){
                  $(".wrapper").css('background','url(img/ntheory.png) 95% top no-repeat fixed');
              } else if(($(window).scrollLeft() >= 4641)&& ($(window).scrollLeft() <= 8424)){
                  $(".wrapper").css('background','url(img/nportfolio.png) 95% top no-repeat fixed');
              } else if(($(window).scrollLeft() >= 8424)&& ($(window).scrollLeft() <= 11124)){
                  $(".wrapper").css('background','url(img/nclients.png) 95% top no-repeat fixed');
              }else {
                  $(".wrapper").css('background','url(img/ncontacts.png) 95% top no-repeat fixed');
              }


        });

这是针对宽度为1680像素的屏幕分辨率。因此，如果屏幕分辨率宽度为1440px，我希望滚动位置图像交换更改有效，您可以说这段代码：

 $(window).scroll(function(){
             if(($(window).scrollLeft() >= 0)&& ($(window).scrollLeft() <= 840)){
                  $(".wrapper").css('background','url(img/naboutus.png) 95% top no-repeat fixed');
              } else if(($(window).scrollLeft() >= 841)&& ($(window).scrollLeft() <= 1681)){
                  $(".wrapper").css('background','url(img/nwhatwedo.png) 95% top no-repeat fixed');
              } else if(($(window).scrollLeft() >= 1682)&& ($(window).scrollLeft() <= 2522)){
                  $(".wrapper").css('background','url(img/ntheory.png) 95% top no-repeat fixed');
              } else if(($(window).scrollLeft() >= 2523)&& ($(window).scrollLeft() <= 3363)){
                  $(".wrapper").css('background','url(img/nportfolio.png) 95% top no-repeat fixed');
              } else if(($(window).scrollLeft() >= 8224)&& ($(window).scrollLeft() <= 10924)){
                  $(".wrapper").css('background','url(img/nclients.png) 95% top no-repeat fixed');
              }else {
                  $(".wrapper").css('background','url(img/ncontacts.png) 95% top no-repeat fixed');
              }


        });

测试网站位于http://karpouzaki.com/fade/

我希望我已经清楚地解释了我想要做的事情。如果您需要进一步澄清，请不要犹豫。

由于

Answer 1

如果您将创建的“步骤”和“内容”类的位置元素设置为继承，则可以检测特定内容部分是否在查看客户端窗口。

CSS

.step, .content
{
    position: inherit !important;
}

jQuery示例1

var diff = $('#content1').position().left - $(window).scrollLeft();

if ( diff <= 0 )
{
   $(".wrapper").css('background','url(img/naboutus.png) 95% top no-repeat fixed');
}

当上面的“diff”值达到0时，这意味着div＃content1的左侧触及客户端浏览器的左侧。当值低于零时，意味着div的左侧开始从客户端窗口隐藏。

然后，您可以使用客户端浏览器的宽度来确定何时切换包装器的背景图像。

jQuery示例2

var diff = $('#content2').position().left - $(window).scrollLeft();
var windowWidth = $(window).width();
var content2Width = $('#content2').width();  

if ( ( diff - ( windowWidth - content2Width ) ) <= 0 )
{
   $(".wrapper").css('background','url(img/nwhatwedo.png) 95% top no-repeat fixed');
}

所以，我认为如果内容div的宽度大于客户端窗口，上述条件将基本上确保用户在背景图像改变之前将滚动条移动该增量。您可以调整逻辑以在滚动过程中更早地更改图像...

Answer 2

我试过这个似乎解决了我的问题：

            var wwidth = $(window).width();
    var spos1 = wwidth - 371;
    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)){
                  $(".wrapper").css('background','url(img/naboutus.png) 95% top no-repeat fixed');
              } else if(($(window).scrollLeft() > spos1)&& ($(window).scrollLeft() <= spos2)){
                  $(".wrapper").css('background','url(img/nwhatwedo.png) 95% top no-repeat fixed');
              } else if(($(window).scrollLeft() > spos2 )&& ($(window).scrollLeft() <= spos3)){
                  $(".wrapper").css('background','url(img/ntheory.png) 95% top no-repeat fixed');
              } else if(($(window).scrollLeft() > spos3)&& ($(window).scrollLeft() <= spos4)){
                  $(".wrapper").css('background','url(img/nportfolio.png) 95% top no-repeat fixed');
              } else if(($(window).scrollLeft() > spos4)&& ($(window).scrollLeft() <= spos5)){
                  $(".wrapper").css('background','url(img/nclients.png) 95% top no-repeat fixed');
              }else {
                  $(".wrapper").css('background','url(img/ncontacts.png) 95% top no-repeat fixed');
              }

这是一种有效的方法吗？或者从编程的角度来看是不正确的？

jquery根据屏幕分辨率更改滚动条位置if语句（用于图像交换）

2 个答案:

CSS

jQuery示例1

jQuery示例2