2011-08-03 7 views
1

私は要素は、以下のCSSを使用してブラウザの底部に固定されているウェブサイト上の効果を作成しようとしています:jqueryを使用する逆スッキースクロールは可能ですか?

div.featured-image { 
width: 100%; 
position: fixed; 
z-index: 10; 
} 

をし、私が起こるしたいことに、このhttp://vertstudios.com/blog/demo/stickyscroller/demo.phpようなものを使用することですアイテムがスクロールしないようにしてください。UPある時点を過ぎてください。私はロゴをサイトの上部に置いてあり、ブラウザが十分な大きさでない場合は、固定されたアイテムを重複させたくありません。だから、私はそれを上に約800ピクセルのバッファをスクロールすることができないようにしようとしているが、まだページの下部に固定されています。

答えて

0

これは、JQueryを使用して、scrollTop()に基づいて、要素の上部と下部のcssプロパティを動的に設定/リセットすることができます。

サンプルはJQuery:

$('#footer').css('top','550px'); 
$(document).bind('scroll',function(event) { 
    var scrollTop = $(window).scrollTop(); 
    if (scrollTop <= 550) { 
     $('#footer').css('bottom',''); 
     $('#footer').css('top','550px'); 
    } else { 
     $('#footer').css('top',''); 
     $('#footer').css('bottom','0px'); 
    } 
}); 

CSS(のdiv#フッタ用):

#footer{ 
    position: fixed; 
    left: 0px; 
    display: block; 
    background-color: green; 
    z-index: 10; 
    height: 100px; 
    width: 100%; 
} 

と作業fiddle

関連する問題