试图使我的section1在滚动上动起来。但这似乎不起作用,这使我感到困惑,因为我已经在另一个元素上使用了此滚动代码,效果很好。但是,该元素不会在屏幕外启动。
这是我的代码。
$(window).scroll(function(){
//section1
var scrollPos = $(window).scrollTop();
if( ( scrollPos > 150 ) && ( scrollState === 'top' ) ) {
$("#section1").animate({left: '60'}, 700);
scrollState = 'scrolled';
}
});
#section1 {
text-align: center;
margin-top: 3em;
margin-bottom: 3em;
font-size: 1em;
height: auto;
font-family: 'Open Sans', sans-serif;
position: relative;
left: -60em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section1" class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p>blablablablablablablabla </p>
</div>
</div>
</div>
最佳答案
我不确定您想要什么,但是如果您使用不带滚动条的容器,或者只是想在用户滚动时检测,则可以使用DOMMouseScroll
进行滚动时检测。这项工作很好。请尝试以下:
$('html').on ('DOMMouseScroll', function (e) {
if(e.originalEvent.detail < 0) {
$("#section1").animate({left: '-60em'}, 700);
} else {
$("#section1").animate({left: '60'}, 700);
}
});
#section1 {
text-align: center;
margin-top: 3em;
margin-bottom: 3em;
font-size: 1em;
height: auto;
font-family: 'Open Sans', sans-serif;
position: relative;
left: -60em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section1" class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p>blablablablablablablabla </p>
</div>
</div>
</div>
更新
您有两个使相同的东西的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);