スクロールするまでhtml要素が固定されないようにするにはどうすればよいですか? ユーザーがスクロールしている間は通常の位置になりますが、ユーザーがスクロールした後は画面から出ませんか?
2616 次
3 に答える
1
リスナーをonscroll
イベントにアタッチし、scrollTop
が要素の Y 位置よりも大きい場合は、 に設定しposition: fixed
ます。
于 2012-05-27T16:58:50.120 に答える
0
私は以前にこのコードを使用しました:
(function($){
$.fn.scrollFixed = function(params){
params = $.extend( {appearAfterDiv: 0, hideBeforeDiv: 0}, params);
var element = $(this);
if(params.appearAfterDiv)
var distanceTop = element.offset().top + $(params.appearAfterDiv).outerHeight(true) + element.outerHeight(true);
else
var distanceTop = element.offset().top;
if(params.hideBeforeDiv)
var bottom = $(params.hideBeforeDiv).offset().top - element.outerHeight(true) - 10;
else
var bottom = 200000;
$(window).scroll(function(){
if( $(window).scrollTop() > distanceTop && $(window).scrollTop() < bottom )
element.css({'position':'fixed', 'top':'5px'});
else
element.css({'position':'static'});
});
};
})(jQuery);
次に、要素を呼び出すだけです。
$(document).ready( function(){
$("#scrollingDiv").scrollFixed({appearAfterDiv:'.sidebar p', hideBeforeDiv:'.footer'});
$("#scrollingDiv1").scrollFixed({hideBeforeDiv:'.footer'});
});
于 2012-05-27T16:59:40.167 に答える
0
jQuery Scrollfollow プラグインをご覧ください。これを使用して、その効果を便利に実現しました。
ビューに表示したい要素で呼び出すだけです。
<script type="text/javascript">
$( '#example' ).scrollFollow();
</script>
イージング、位置、その他のパラメータを設定できます。
于 2012-05-27T17:14:48.800 に答える