11

私の目標は、誰かがページを一定量下にスクロールすると、ページの上部に固定 div が表示されるようにすることです。基本的に、ヘッダー セクションが表示されなくなると、この div が表示されます。

私が欲しいものに似たコードを見てきました。ただし、ページの上部からピクセル数を簡単に変更できるものは見たことがありません (可能であれば)。

これは、スクロールによってdivを表示することを扱っているのを見たコードです。

// Get the headers position from the top of the page, plus its own height
var startY = $('header').position().top + $('header').outerHeight();

$(window).scroll(function(){
    checkY();
});

function checkY(){
    if( $(window).scrollTop() > startY ){
        $('.fixedDiv').slideDown();
    }else{
        $('.fixedDiv').slideUp();
    }
}

// Do this on load just in case the user starts half way down the page
checkY();

表示させる方法を知りたいだけです。誰かが既にスライド アップとスライド ダウンのアニメーションを使用しているコードを知っている場合は、それも非常にありがたいですが、必須ではありません。

4

3 に答える 3

16 
window.addEventListener("scroll",function() { 
   if(window.scrollY > 500) {
      $('.fixedDiv').slideDown();
   }
   else {
      $('.fixedDiv').slideUp();
   }
},false);
于 2012-11-25T07:54:57.987 に答える
1

Brandon Tilley がコメントで私の質問に答えました...

ヘッダーの位置と高さに基づいて計算するのではなく、startY を使用して最初の行を必要な特定の Y 位置に変更します。更新されたフィドルは次のとおりです: jsfiddle.net/BinaryMuse/Ehney/1

于 2012-11-25T09:09:15.993 に答える
0 
window.addEventListener("scroll",function() { 
   $('.fixedDiv')[(window.scrollY > 500)?"slideDown":"slideUp"]();
},false);

デモ: http://jsfiddle.net/DerekL/8eG2A/

于 2012-11-25T08:33:58.553 に答える