jquery - 体の高さの X% の後に div を表示

Question

ページの高さが 300px スクロールされた後、div を呼び出して上部 (検索バーといくつかの関数) に表示するにはどうすればよいですか?

私が達成しようとしているのは、ユーザーがスクロールすると、特定の時点で、いくつかのツールを含む別の div が表示されることです。

Answer 1

おそらくそれがあなたが探しているものです：

JavaScript

$(document).ready(function () {
  $('#my-div').hide();
});
$(document).scroll(function (e) {
    if (document.body.scrollTop >= 300) {
       $('#my-div').show(200);
    } else {
      $('#my-div').hide(200);
    }
});

CSS

#my-div {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 300px;
}
body {
  height: 11100px;
}

HTML

<div id="my-div">
  Search: <input type="text" />
</div>

デモ: http://jsbin.com/welcome/49824

Answer 2

.scroll()イベントを発生させるために使用し.scrollTop()、ページの上部からスクロールされた高さを計算するために使用します。

次に、この値に応じて、ツールを表示/非表示にします。

 $(document).scroll(function(){
        if (document.body.scrollTop>300){
            $(".tools").show();
       } else
       {
           $(".tools").hide();
       }
    });

-- デモを見る --