2016-03-26 26 views
1

http://kinkinurbanthai.com/ benzeri bir açılış sayfası oluşturmaya çalışıyorum ancak kullanıcı sayfanın üst kısmındaysa sıçramayı yeniden etkinleştirmem gerekiyor 'istek' seçeneğine kadar ek bir kaydırma yapın veya tekrar sıçramayı etkinleştirin.Sayfanın üst kısmında ve kullanıcı yukarı kaydırıyorsa öğeye sınıf ekleyin

Sıçrama elemanını yeniden etkinleştirme noktasına kadar çalışan kodum var; ancak ek 'yukarı kaydırma' isteğinin beklemesini alamıyorum.

Şu ana kadar buradaki kod, eksi kilitleme b/c'sinin atm için ihtiyacım olanı yapmıyor. Kod: http://jsfiddle.net/teejudp3/2/

// Does stuff on load and scrolls 
//-------------------------------// 
$(window).on("load scroll",function(e){ 

    var $window = $(window); 

    if ($window.scrollTop() <= 0) { 
     $('.splashwrapper').removeClass('remove'); 
    } 


    // hide/show splash screen 
    //=========================// 
     // chrome/FF 
     $('.splashwrapper').bind('DOMMouseScroll', function(e){ 

      // get scroll direction 
      var direction = (function() { 

       var delta = (e.type === 'DOMMouseScroll' ? 
        e.originalEvent.detail * -40 : 
        e.originalEvent.wheelDelta); 
        return delta > 0 ? 0 : 1; 
      }()); 

      if(direction === 0) { 
       // scroll up 

      } else { 
       // scroll down 
       $('.splashwrapper').addClass('remove');     
      } 

      //prevent page fom scrolling 
      return false; 
     }); 

     //IE, Opera, Safari 
     $('.splashwrapper').bind('mousewheel', function(e){ 

      // get scroll direction 
      var direction = (function() { 

       var delta = (e.type === 'DOMMouseScroll' ? 
        e.originalEvent.detail * -40 : 
        e.originalEvent.wheelDelta); 
        return delta > 0 ? 0 : 1; 
      }()); 

      if(direction === 0) { 
       // scroll up 

      } else { 
       // scroll down 
       $('.splashwrapper').addClass('remove');     
      } 

      //prevent page fom scrolling 
      return false; 
     }); 

     // touch device - uses touchSwipe.js 
     $(".splashwrapper").swipe({ 
      swipeUp:function() { 
       $('.splashwrapper').addClass('remove'); 
      } 
     }); 

}); 

onlar < = 1 kaydırma üst konuma gidin ama bu etkiler istediğini vermek görünmüyor eğer kullanıcılar kaydırma durdurmaya çalıştık.

// temporarily lock users scroll position 
var $window = $(window), previousScrollTop = 1, scrollLock = false; 
$window.scroll(function(event) {  
    if(scrollLock) { 
     $window.scrollTop(previousScrollTop); 
    } 
    previousScrollTop = $window.scrollTop(); 
}); 

// if at 1px from top, stop scroll from going up one time 
if ($window.scrollTop() <= 1) { 
    scrollLock = true; 
    $window.scrollTop(1, 0); 
    setTimeout(function() { 
     scrollLock = false; 
    }, 1000); 
} 

cevap

1

Durma noktası bölümünü yeniden çalışarak çalışmayı denedim - aka, onu çok fazla düşünmekteydim.

Güncellenen keman: http://jsfiddle.net/teejudp3/6/

var $window = $(window); 

    if ($window.scrollTop() === 0 && $('.splashwrapper').hasClass('ready')) { 
     $window.scrollTop(1); 
     $('.splashwrapper').removeClass('ready').removeClass('remove'); 
    } 

    if ($window.scrollTop() === 0 && !$('.splashwrapper').hasClass('ready')) { 
     $window.scrollTop(1); 
     setTimeout(function() { 
      $('.splashwrapper').addClass('ready'); 
     }, 500); 
    } 
İlgili konular