0

このコードを使用して、Web サイトをスクロールするときに div を表示/非表示にします。私の問題は、たとえば div#topがブラウザーのウィンドウの上部に到達したときに div が表示されることです。ブラウザウィンドウの下部にdivが表示され始めた.newsときにdivが表示され、同じように消える必要があります。#top

  $(document).ready(function () {
    var topOfOtheDiv3 = $("#top").offset().top;
    var topOfOtheDiv4 = $("#bottom").offset().top;
    $(window).scroll(function () {
        if ($(window).scrollTop() > topOfOtheDiv3 && $(window).scrollTop() < topOfOtheDiv4) {
            $(".news").show();
        } else {
            $(".news").hide();
        }
    });
});

ここに私が見つけたフィドルがありますhttp://jsfiddle.net/4r5kn/10/ページの下部から青いボックスが表示され始めると、緑のボックスが表示されます。

4

2 に答える 2

1

これにウィンドウの高さを追加する必要があります。これにより、div の上部 + ウィンドウの高さが最初に表示される必要があります。

ここにフィドルがあります：http://jsfiddle.net/4r5kn/14/

  1. var winHeight = $(window).height();私はちょうどあなたのコードに追加しました、
  2. それをif文に追加しましたif ($(window).scrollTop()+winHeight > topOfOthDiv && $(window).scrollTop()+winHeight < topOfOthDiv2) {
  3. そして出来上がり。

このようにして、高さをまったく変更または微調整する必要がある場合 (たとえば、ページの下部に div の下部が表示されているときに表示したいとします)、そのピクセル量をwinHeight変数に追加できます。

于 2013-09-12T04:27:59.383 に答える