返回滚动位置javascript

时间：2018-08-16 14:30:02

标签： javascript scroll callback return

我有一个问题，该代码将变量posY收集在滚动位置中，因为当用户关闭灯箱时，页面返回到之前但没有滚动的位置

var APP = {}; // init web site
function Screen(config) {
"use strict";
var $session    = config.session,
    $point      = $('#header .point'),
    $menu_link  = $('.menu .item'),
    sessionLen  = $session.length;

  return {

    animatePoint: function(index) {

        if(index >= 0) {

            link_left   = $menu_link.eq(index).offset().left,
            link_width  = $menu_link.eq(index).outerWidth(),
            point_width = $point.outerWidth(),
            posX        =  (link_left+(link_width/2)) - (point_width/2);

            $point.addClass('is-show');
            $point.css('left',posX);
        }
        else {

            $point.removeClass('is-show');
            $point.css('left',0);
        }

    },

    sessionScroll: function(index, speed){

      var index = index || 0;
      var speed = speed || 1000;

      $('body, html').animate({ scrollTop: $session.eq(index).offset().top-125 , speed }  )
    },
    // fixed menu
    fixedMenu: function($menu, posY){

      $(window).on('scroll', function(){

        var scrollY = $(window).scrollTop();

        if(scrollY > posY){

          $menu.addClass('_fixed');
        }
        else {

           $menu.removeClass('_fixed'); 
        }

      });
    },

    // event listener change session
    sessionChange: function(callback) {

      var session_last_position;
      var session_current_position;
      var lastScrollTop = 0;

      $(window).on('scroll', function(){

          var scrollY = $(window).scrollTop();
          var direction = '';

          if (scrollY > lastScrollTop) {

            // downscroll code
            direction = 'down';

          } else {

            // upscroll code
            direction = 'up';
          }

          lastScrollTop = scrollY;

        session_current_position = -1;

        // check position of the scroller Y
        for(i=0; i < sessionLen; i++){

          var $session_current = $session.eq(i);
          var posY = $session_current.offset().top;

          if(direction === 'down'){

            posY = posY-200;
          }
          else {

            posY = posY-400;
          }

          if(scrollY > posY){

            session_current_position++;
          };
        }

           // if change session view
          if(session_current_position != session_last_position) {

            session_last_position = session_current_position;

            if(callback){

              var data = {

                $el: $session.eq( session_current_position ),
                index: session_current_position,
                posY: $session.eq( session_current_position ).offset().top
              };

              callback(data);
            }
          } 
      });
    }
  }
};

function pageActive(index){

var $headerLink = $('#header .menu a')
var current_index  = index-1;

switch(index) {
    case 0:
       pageName = 'home';
        break;
    case 1:
       pageName = 'empresa';
        break;
    case 2:
       pageName = 'empresa';
        break;    
    case 3:
       pageName = 'produtos';
        break; 
    case 4:
       pageName = 'projetos';
        break;  
    case 5:
       pageName = 'cases';
        break; 
    case 6:
       pageName = 'contato';
        break;                     
    default:
        pageName = 'contato';
        console.log('contato')
}

if(pageName == 'home'){

    current_index = 0;

    $headerLink.removeClass('active');
}
else {

    if(pageName == 'empresa'){

        current_index = 1;
    }

    $headerLink.removeClass('active');
    $headerLink.eq(current_index-1).addClass('active');
}
};

function labelDropdownName($selector , value){

var $select = $selector.closest(".selection");

if(value != "todos"){

    var cat_name  = $select.find("option:eq(0)").text()
    var newText = "<span>"+cat_name+"</span>"+$select.find(".text").text();

    $select.find(".text").html(newText) 
}
};

function restorePropFilters(){

$.each($('.ui.dropdown'), function(index, el){

    $(this).find(".item:eq(0)").trigger("click");
})
};

function filterProducts(){

var data = {};
var $catalogProducts = $('.catalog-product_list');
var data_filter  = ''; 
var filter_clear = 0;
var $btnFilter = $(".catalog-product_menu-filter label");

data.category   = $catalogProducts.attr("data-category");
data.volume     = $catalogProducts.attr("data-volume");
data.material   = $catalogProducts.attr("data-material");
data.gargalo    = $catalogProducts.attr("data-gargalo");
data.finalidade = $catalogProducts.attr("data-finalidade");
data.familia    = $catalogProducts.attr("data-familia");

for(prop in data){

    var value = data[prop];

    if(value != "todos"){

        data_filter+="."+value;
    }
    else {

        filter_clear++;
    }
}

if(filter_clear != 6){

    $btnFilter.addClass("clear-enabled");
    $btnFilter.text("Limpar Filtros");
}
else {

    $btnFilter.removeClass("clear-enabled");
    $btnFilter.text("Filtros:");
}


$catalogProducts.isotope({

    filter: data_filter
})
};

function loadingContentProduct(id, $product){

$.ajax({

    url:$("body").attr("data-base")+"/wp-admin/admin-ajax.php",
    type: "GET",
    data: { id: id , action:"product_single"},
    async: false,
    success: function(data){

        $(".product-internal .ui.grid").html("");
        $(".product-internal .ui.grid").append( data );

        $(".product-preview").removeClass('is-content-open');
        $product.addClass('is-content-open');

        new Swiper('.swiper-product', {
            nextButton: '.swiper-product .swiper-button-next',
            prevButton: '.swiper-product .swiper-button-prev',
            speed: 1000
        });
    }
});
};

function loadingProducts(index){

var product_index    = index || 0,
    data             = {},
    $catalogProducts = $('.catalog-product_list'),
    $btnLoading      = $(".btn-loading-product");

data.category   = $catalogProducts.attr("data-category");
data.volume     = $catalogProducts.attr("data-volume");
data.material   = $catalogProducts.attr("data-material");
data.gargalo    = $catalogProducts.attr("data-gargalo");
data.finalidade = $catalogProducts.attr("data-finalidade");
data.familia    = $catalogProducts.attr("data-familia");



$btnLoading .addClass("loading");
$btnLoading .text("carregando produtos...");

 $.ajax({

    url:$("body").attr("data-base")+"/wp-admin/admin-ajax.php",
    type: "GET",
    data: { product_index: product_index , action:"product", prop: data},
    success: function(data){

        $catalogProducts.append(data);

        $catalogProducts.isotope({

          itemSelector: '.product-preview',
          layoutMode: 'fitRows'
        });


        $('.catalog-product_header').addClass('_enabled');
        $btnLoading .removeClass("loading");
        $btnLoading .remove();

        $catalogProducts.isotope('on','arrangeComplete', 
function(filteredItems) {

            $("#header .menu a").eq(1).trigger('click');

            if(filteredItems == 0){

                $('.message-product-notfind').fadeIn(500);
            }
            else {

                $('.message-product-notfind').fadeOut(500); 
            }
        });
    }
})
};

function sendMail(data){

var $form = $('.ui.form');

    $form.find(".button").addClass("loading");
    $.ajax({

        url:"mail.php",
        type:"POST",
        data: data,
        success: function(data){

            $form.find(".button").removeClass("loading")
            $form.find(".positive.message").fadeIn(500);

            setTimeout(function(){

                $form.find(".button").text("enviar");

            }, 500)
        }
    });
};

window.onload = function(){


var $header         = $('#header');
var $footer         = $('#footer');
var $btnMenu        = $header.find('.icon.sidebar');
var $menu           = $header.find('.menu');
var $product        = $('.product-preview');
var $projectGallery = $('.swiper-modal');
var $catalogProducts  = $('.catalog-product_list');


var $form = $('.ui.form');

var View = Screen({
    session: $('.anchor')
}); 

View.sessionChange(function(prop) {

    $header.find('.item').removeClass('active');
    $header.find('.menu').removeClass('is-show');

    if(prop.index > 0) {

        var index = Number(prop.index)-1;

        $header.find('.item').eq(index).addClass('active');
    }

    if(prop.index == 0) { // Top Session

        $('.portifolio-featured-wrapper').addClass('animate');
        $('#home').addClass('animate');
    }
    if(prop.index == 2){ //Product Session

        $('.catalog-product_header').addClass('fixed');
    }
    else {

        $('.catalog-product_header').removeClass('fixed');
    }


        View.animatePoint( index );
});

$header.find('.item').on('click', function(){

    var index = $(this).index()+1;

    $('body').removeClass('is-product-open');
    $('.swiper-modal').removeClass('is-show');

    View.sessionScroll( index );
});

$('.logo').on('click', function(){

    $('body, html').animate({ scrollTop: 0  },  500 );
});

$('.product-filter .categories a').on('click', function(e) {

    e.preventDefault();
    e.stopPropagation();
});


$(".back-product-link").on("click", function(){

    $header.find(".item:eq(0)").trigger("click");
});


$footer.find('.menu-footer a').on('click', function(e){

    var index = $(this).index();

    View.sessionScroll(  index );
});

$btnMenu.on('click', function(e){

    if($menu.hasClass("is-show")){

        $menu.removeClass("is-show");
    }
    else {

        $menu.addClass("is-show");
    }
});

$('.portifolio-featured').eq(0).on('click', function(){

    View.sessionScroll(2);
});

$('.portifolio-featured').eq(1).on('click', function(){

    View.sessionScroll(3);
});

$('.swiper-modal .close').on('click', function() {

    $projectGallery.removeClass('is-show');
});

$('.product-gallery_item').on('click', function() {

    var index = $(this).index()+1;  

    $projectGallery.addClass('is-show');
    swiperModal.slideTo(index, 0);
});


 var swiperMain = new Swiper('#slide .swiper-container', {
    pagination: '.swiper-pagination',
    speed: 500,
    autoplay: 6000,
    paginationClickable: true,
    loop: true,
    effect: 'fade',
    onInit: function(){

        $('#slide .swiper-wrapper').addClass('is-show');
    }
});

  var swiperModal = new Swiper('.swiper-modal .swiper-container', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    speed: 1000,
    paginationClickable: true,
    loop: true
});

$('.btn-close, .link-close').on('click', function(){


    var $product = $('.product-preview.is-content-open'),
        posY     = $product.offset().top-200;

    $('body').removeClass('is-product-open');
    $('body').stop().animate({ scrollTop: posY+'px' }, 1000);


});

$product.on('click', function(){

    var imgUrl  = $(this).find('img').attr('src');

    $('body').addClass('is-product-open');
    $('.product-internal img').attr('src', imgUrl); 

    View.sessionScroll(1);
});




window.dropdownFilter = true;


 $(".catalog-product_menu-category a").on('click', function(e){

    var value = $(this).text().toLowerCase();

    e.preventDefault();
    e.stopPropagation();

    $(this).siblings().removeClass('is-active');
    $(this).addClass('is-active');

    $catalogProducts.attr("data-category", value);


    window.dropdownFilter = false;
    restorePropFilters();
    filterProducts();
    window.dropdownFilter = true;

 })

 var $btnFilter = $(".catalog-product_menu-filter label");

 $btnFilter.on("click", function(){

    if($(this).hasClass("clear-enabled")){

        $(".catalog-product_menu-category a:eq(0)").trigger("click")
    }
 });

 $('.ui.search').on('keyup', function(){

    var value = $(this).find('input').val();

    if(value.length >= 2){

        value = value.replace(/ /g,"-");

        value = value.toLowerCase();

        $catalogProducts.isotope({

            filter: function(){ 

                var classes = $(this).attr('class').toLowerCase();

                if( classes.indexOf(value) != -1 ) {

                    return $(this);
                }
            }
        })
    }
    else {

        $catalogProducts.isotope({

            filter: '*'
        })
    }
 })

$('.btn-open-filter').on('click', function(){

    $('.catalog-product_header').addClass('open');
});

$('.catalog-product_header .close').on('click', function(){

    $('#header .menu a').eq(1).trigger('click');
    $('.catalog-product_header').removeClass('open');
    $('.catalog-product_menu-filter label').trigger('click')
});

$('.link-all-products').on('click', function(){

    $catalogProducts.isotope({

        filter: '*'
    })
})

$('.mask-btn-mobile').on('click', function(){

    $('.catalog-product_header .close').trigger('click');
});

$('.btn-filter').on('click', function(){

    $('#header .menu a').eq(1).trigger('click');
    $('.catalog-product_header').removeClass('open');
});

$('.ui.button.basic.btn-top').on('click', function(){

    $('#header .menu a').eq(1).trigger('click');    
})  

$('.ui.search input').on('focus', function(){

    $(".catalog-product_menu-category a:eq(0)").trigger("click");
})

$('.ui.search input').on('mouseout', function(){

    $('.ui.search input').val('');
})

$('.btn-toggle-filter').on('click', function(){

    console.log('ae')

    var $subFilters = $(".catalog-product_menu-filter .wrapper");

    if($subFilters.hasClass('is-enabled')){

        $subFilters.removeClass('is-enabled');  

    }
    else {

        $subFilters.addClass('is-enabled'); 
    }
});

$('.ui.dropdown.filter-volumes').dropdown({

    onChange: function(value, text, $element){

        $select = $element.closest(".selection");

        $catalogProducts.attr("data-volume", value);    

        labelDropdownName( $element , value);

        if(window.dropdownFilter){

            filterProducts();
        }   

    }
});

$('.ui.dropdown.filter-materiais').dropdown({

    onChange: function(value, text, $element){

        $select = $element.closest(".selection");

        $catalogProducts.attr("data-material", value);  

        labelDropdownName( $element , value);

        if(window.dropdownFilter){

            filterProducts();
        }   
    }
});

$('.ui.dropdown.filter-gargalos').dropdown({

    onChange: function(value, text, $element){

        $select = $element.closest(".selection");

        $catalogProducts.attr("data-gargalo", value);   

        labelDropdownName( $element , value);

        if(window.dropdownFilter){

            filterProducts();
        }   
    }
});

$('.ui.dropdown.filter-finalidades').dropdown({

    onChange: function(value, text, $element){

        $select = $element.closest(".selection");

        $catalogProducts.attr("data-finalidade", value);    

        labelDropdownName( $element , value);

        if(window.dropdownFilter){

            filterProducts();
        }   
    }
});

$('.ui.dropdown.filter-familias').dropdown({

    onChange: function(value, text, $element){

        $select = $element.closest(".selection");

        $catalogProducts.attr("data-familia", value);   

        labelDropdownName( $element , value);

        if(window.dropdownFilter){

            filterProducts();
        }   
    }
});


$('.product-navigation-prev').on('click', function(){

    var index = $(".product-preview.is-content-open").index();

    index = index -1;

    if(index < 0){

        index = $(".product-preview").length -1;
    }

    loadingContentProduct( $('.product-preview').eq(index).attr('data-id'), $('.product-preview').eq(index) );
})

$('.product-navigation-next').on('click', function(){

    var index = $(".product-preview.is-content-open").index();

    index = index +1;

    if(index >= $('.product-preview').length){

        index = 0;
    }

    loadingContentProduct( $('.product-preview').eq(index).attr('data-id'), $('.product-preview').eq(index) );
})

$('.product-navigation-next').on('click', function(){

    var $productCurrentContent = $(".product-preview.is-content-open").index();
})

$catalogProducts.on("click", '.product-preview', function(){

    $header.find('a').eq(1).trigger("click");

    $(".product-internal .ui.grid").html('');
    $('body').addClass('is-product-open');

    loadingContentProduct( $(this).attr('data-id'), $(this) );
});


$(".btn-loading-product").on("click", function(){

    loadingProducts();
});


var $form = $('.ui.form');

$form.form({
    fields: {
       email: {
        identifier  : 'email',
        rules: [
          {
            type   : 'email',
            prompt : 'Please enter a valid e-mail'
          }
        ]
      }
    }
  });

  $form.find(".button").on("click", function(e){

    if($form.form('is valid')) {

        var data = $form.form('get values');

        data.message = $form.find("textarea").val();

        sendMail(data);
    }
    else {

    }
}); 

$form.find(".positive.message .icon").on('click', function(){

    $form.find(".positive.message").fadeOut(500);                   
});

loadingProducts();
}

0 个答案:

没有答案
相关问题
最新问题