JQuery изменение положения полосы прокрутки, если оператор (для обмена изображения) в зависимости от разрешения экрана

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 пикселей. Поэтому, если ширина экрана составляет, скажем, 1440 пикселей, я бы хотел, чтобы изменения положения изображения прокрутки изменялись настолько эффективно, что вы бы сказали этот код:

 $(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

Я пробовал это и, похоже, решил мою проблему:

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

это эффективный способ сделать это? или это неправильно с точки зрения программирования?

Answer 2

Если вы установите элемент position созданных вами классов "step" и "content" для наследовать , вы можете определить, будет ли виден конкретный раздел контента. окно клиента.

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 Sample 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 больше, чем окно клиента, то вышеупомянутое условие по существу обеспечит, чтобы пользователь перемещал полосу прокрутки на эту величину, прежде чем фоновое изображение изменится. Вы можете настроить логику, чтобы изменить изображение ранее в процессе прокрутки ...