web-dev-qa-db-ja.com

ページ上の特定のポイントを通過したときにdivを表示する

本当にこれからどこから始めればいいのかわからない。ページ上の特定のdivがスクロールされた後、display：none（または実際に類似したもの）からdivを変更する方法を知っている人はいますか？

javascriptjquerycsshtmlshow
11
Francesca

まず、divにID（たとえば、dvid）を付け、他のdiv（後でスクロールを検出する）のIDがothdivであるとします。その後、次のようなことができます：

_$(document).ready( function() {
    $("#dvid").hide(); //hide your div initially
    var topOfOthDiv = $("#othdiv").offset().top;
    $(window).scroll(function() {
        if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
            $("#dvid").show(); //reached the desired point -- show div
        }
    });
});
_

小さな小さなjsFiddleデモ： 小さな小さなリンク 。

30
Chris

ウィンドウのonscrollで、現在のスクロール位置とdivの位置をページの上部から取得し、それに応じて要素を表示/非表示にします。

window.onscroll = function (oEvent) {
  var mydivpos = document.getElementById("mydiv").offsetTop;
  var scrollPos = document.getElementsByTagName("body")[0].scrollTop;

  if(scrollPos >= mydivpos)
    document.getElementById("noshow").className = "";
  else
    document.getElementById("noshow").className = "hidden";
};

デモ

5
sachleen

SCROLLBARS＆ "$（window）.scrollTop（） "

私が発見したのは、ありがたいことに上記で提供されたソリューションのような機能の呼び出し（このフォーラム全体でこれの例はもっとたくさんあります-すべてうまくいきます）は、スクロールバーが実際に表示されて動作しているときにのみ成功するということです。

（私がばかげて試したかもしれませんが）そのような機能を実装したい場合、また、のように、スクロールバーのない最小限の「クリーンスクリーン」を実装したい場合もあります。 このディスカッション、$（window）.scrollTop（）は機能しません。

それはプログラミングの基本かもしれませんが、これを理解するのに長い時間を費やしたので、仲間の初心者に頭を提供すると思いました。

これを克服する方法やもう少し洞察について誰かがアドバイスを提供できる場合は、代わりにonmouseover/mouseleaveを表示/非表示にする必要があったので、お気軽に返信してくださいここに

CollyG、長生きしてプログラムします。

2
collyg

Divがスクロールされた後に表示されるように@ Abody97の回答を変更

http://jsfiddle.net/nickaknudson/f72vg/

$(document).ready( function() {
    $("#div_to_show").hide(); //hide your div initially
    $(window).scroll(function() {
        // once top of div is scrolled past
        if($(body).scrollTop() >= $("#div_to_scroll_past").offset().top) {
            $("#div_to_show").show(); //reached the desired point -- show div
        }
    });
});

[〜＃〜]または[〜＃〜]divの下がスクロールされると

$(document).ready( function() {
    $("#div_to_show").hide(); //hide your div initially
    $(window).scroll(function() {
        // once bottom of div is scrolled past
        if($(body).scrollTop() >= ( $("#div_to_scroll_past").offset().top + $("#div_to_scroll_past").outerHeight() )) {
            $("#div_to_show").show(); //reached the desired point -- show div
        }
    });
});

[〜＃〜]リソース[〜＃〜]

0
nickaknudson

これが動作している フィドル

Jquery

$(function(){
    var d = $('.hidden');
    var dPosTop = d.offset().top;
    var win = $(window);
    win.scroll(function(e){
        var scrollTop = win.scrollTop();
        if(scrollTop >= dPosTop){
          d.show(2000);
        }
      else{
        d.hide(2000);
      }
    });

});
0
Clyde Lobo