试图使我的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);

07-24 09:50
查看更多