動畫滾動不起作用元素

試圖讓我的部分1動畫滾動。但它似乎並沒有工作，這使我感到困惑，因爲我已經在另一個元素上使用了這種滾動代碼，這很好。但是，這個元素並不是從屏幕開始的。動畫滾動不起作用元素

這是我的代碼。

$(window).scroll(function(){ 
 
//section1 
 
    var scrollPos = $(window).scrollTop(); 
 

 
    if((scrollPos > 150) && (scrollState === 'top')) { 
 
     $("#section1").animate({left: '60'}, 700); 
 
     scrollState = 'scrolled'; 
 
    }  
 
});

#section1 { 
 
\t text-align: center; 
 
\t margin-top: 3em; 
 
\t margin-bottom: 3em; 
 
\t font-size: 1em; 
 
\t height: auto; 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t position: relative; 
 
\t left: -60em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="section1" class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-6 col-md-offset-3"> 
 
\t \t \t \t <p>blablablablablablablabla </p> \t 
 
\t \t \t </div> 
 
\t \t </div> \t \t \t 
 
\t </div>

來源

2016-12-13 suonpera

你把'scrollState'設置爲'top'的地方？ – Curt

這種方式滾動的長度是從頂部來的，或者我會這麼想。 – suonpera

但是他要求的聲明在哪裏。 – TheValyreanGroup

我不完全明白你想要什麼，但如果你使用的容器沒有滾動條或者只是你想要檢測用戶何時滾動，你可以使用DOMMouseScroll用於檢測時滾動。這工作很好。請嘗試以下：

$('html').on ('DOMMouseScroll', function (e) { 
 
    if(e.originalEvent.detail < 0) { 
 
     $("#section1").animate({left: '-60em'}, 700); 
 
    } else { 
 
     $("#section1").animate({left: '60'}, 700); 
 
    } 
 
});

#section1 { 
 
\t text-align: center; 
 
\t margin-top: 3em; 
 
\t margin-bottom: 3em; 
 
\t font-size: 1em; 
 
\t height: auto; 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t position: relative; 
 
\t left: -60em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="section1" class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-6 col-md-offset-3"> 
 
\t \t \t \t <p>blablablablablablablabla </p> \t 
 
\t \t \t </div> 
 
\t \t </div> \t \t \t 
 
\t </div>

UPDATE

你有兩個window.scroll功能誰做同樣的事情。您可以連接兩個：

的

var main = function() { 

    var scrollState = 'top'; 
    //rowheader 
    $(window).scroll(function(){ 

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

     if((scrollPos > 150) && (scrollState === 'top')) { 
      $("#rowheader h1").animate({left: '-20em'}, 700); 
      $("#section1").animate({left: '60'}, 700); 
      scrollState = 'scrolled'; 
     }  
     else if((scrollPos <= 150) && (scrollState === 'scrolled')) { 
      $("#rowheader h1").animate({left: '0'}, 500); 
      scrollState = 'top'; 
     } 
    }); 

}; 

$(document).ready(main);

來源

2016-12-13 13:48:54

首先，有一點可能不會爲你工作是你爲150px後可能已經滾出視的部分。在這種情況下，您應該使用固定位置或定義頂部距離。

其次，我會建議您使用CSS來定義元素的可見性而不是jQuery或JavaScript。

請查看此小提琴以獲得在節元素上具有固定位置的演示。 https://jsfiddle.net/cazdt0gj/

通過添加類，您不必擔心代碼的「滾動」部分。

$("#section1").addClass('active')

來源

2016-12-13 15:04:13 sankorati

動畫滾動不起作用元素

回答

相關問題