13

これをどこから始めればよいかわかりません。ページ上の特定の div がスクロールされた後、display:none (または実際に同様のもの) から div を変更する方法を知っている人はいますか?

4

6 に答える 6

31

まず、divID を指定します。たとえば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 デモ:小さな小さなリンク.

于 2012-08-14T18:04:25.673 に答える
5

ウィンドウの 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";
};

デモ

于 2012-08-14T18:07:35.457 に答える
2

スクロールバー & "$(window).scrollTop()"

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

もし (私が愚かにも試みたように)、あなたがそのような機能を実装したいと思っていて、また、スクロールバーのないミニマリストの「クリーンスクリーン」を実装したいと思っているなら、この議論のように$(window). scrollTop()は機能しません。

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

誰かがこれを克服する方法やもう少し洞察を得る方法についてアドバイスを提供できる場合は、お気軽に返信してください。

長生きしてプログラムしてください、CollyG.

于 2015-02-07T14:51:02.587 に答える
0

これが実用的なフィドルです

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);
      }
    });

});
于 2012-08-14T18:13:03.580 に答える
0

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
        }
    });
});

資力

于 2012-08-14T18:08:59.247 に答える
-1

これを行う最も簡単な方法は、このような関数で jQuery を使用することです。

var eventPosition = 550; // This is the height position you want the event to fire on.
$(window).scroll(function(e) {
    if (window.screenY >= eventPosition) {
        fireEvent();
    }
});

function fireEvent() {
    // Add logic here to complete what you're trying to do.
};
于 2012-08-14T18:07:44.913 に答える