Question

尝试让我的section1动画滚动。但它似乎无法工作，这让我感到困惑，因为我已经在另一个元素上使用了这个滚动代码，这很好。但是，该元素不会从屏幕开始。

这是我的代码。

＆＃13;

(a, b) in tests

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

Answer 1

我不完全清楚你想要什么，但是如果你使用没有滚动条的容器或只是想在用户滚动时检测，你可以在滚动时使用DOMMouseScroll进行检测。这工作很好。请尝试以下：

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

<强>更新

你有两个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);

Answer 2

首先，一件可能不适合您的事情是，您在150px之后可能已将该部分滚动到视野之外。在这种情况下，您应该使用固定位置或定义顶部距离。

其次我建议您使用CSS来定义元素的可见性，而不是jQuery或javascript。

请查看此小提琴，了解截面元素上具有固定位置的演示。 https://jsfiddle.net/cazdt0gj/

通过添加类，您不必担心代码中的“滚动”部分。

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

滚动动画不适用于元素

2 个答案: