如何隱藏/顯示某個div在視圖中的div？

如果另一個div顯示在屏幕上，我需要將div淡出。我被告知我需要使用Javascript來做到這一點，以及使其自動加載。如何隱藏/顯示某個div在視圖中的div？

有誰知道解決方案嗎？

我已經搜索了一下，我試着編輯以下內容，但我沒有實施它。

<script type="text/javascript"> 
    window.onLoad(function() { 
     if ($('.section5').is(":visible")) { 
      $(".arrow").fadeOut(fast); 
     } else if ($('.section5').is(":hidden")) { 
      $('.arrow').fadeIn(fast); 
     } 
    }); 
</script>

來源

2013-10-30 noob160

，如果你正在尋找解決方案，使股利顯示/隱藏時向下滾動或向上滾動頁面，並在滾動頁面時使其可見，而滾動後其他div不在滾動頁面上，以下是您應該執行的操作：

假設的div應該是可見的窗體上滾動時就是這樣：

<div id='div1'></div>

，並應隱藏和顯示相應的股利是這樣的：

<div id='div2'></div>

這裏您顯示的腳本使用：

<script type="text/javascript"> 
    $(document).ready(function() { 

     AdjustDiv(); 

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

    function AdjustDiv() { 
     var windowheight = window.innerHeight; 
     var div1height = $('#div1').height(); 


     var scroll_top = $(window).scrollTop(); 
     var div1top = $('#div1').offset().top; 


     var window_bottom = scroll_top + windowheight; 
     var div1_bottom = div1top + div1height; 


     if 
     (
      (
       (scroll_top >= div1top) 
       && 
       (scroll_top < div1_bottom) 
      ) 
      || 
      (
       (scroll_top <= div1top) 
       && 
       (window_bottom >= div1_bottom) 
      ) 
      || 
      (
       (scroll_top <= div1top) 
       && 
       (window_bottom > div1top) 
      ) 
     ) { 
      $('body').css('background-color', 'green'); 
     } 
     else { 
      $('body').css('background-color', 'red'); 
     } 
    } 
</script>

只是爲了演示我把背景紅色，如果div1不可見，綠色如果vi錫布爾赫丁

，這裏是完整的示例，請嘗試：

 <html> 
     <head> 
      <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
     </head> 
     <body> 
      <div id='div0' style='border: solid 1px black;'> 
       <p> 
        aadsa dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas da2121212121s dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
      </div> 
      <div id='div1' style='border: solid 1px black;'> 
       <h1> 
        DIV 1</h1> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
      </div> 
      <div id='div3' style='border: solid 1px black;'> 
       <p> 
        aadsa dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas da2121212121s dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
      </div> 
      <div id='div4' style='border: solid 1px black;'> 
       <p> 
        aadsa dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas da2121212121s dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
       <br /> 
       <p> 
        tdasd dasdas das dasdas das das</p> 
      </div> 
      <div id='div2' style='border: solid 1px black;'> 
       div 2<br /> 
       div 2<br /> 
       div 2<br /> 
       div 2<br /> 
      </div> 
      <script type="text/javascript"> 
       $(document).ready(function() { 

        AdjustDiv(); 

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

       function AdjustDiv() { 
        var windowheight = window.innerHeight; 
        var div1height = $('#div1').height(); 


        var scroll_top = $(window).scrollTop(); 
        var div1top = $('#div1').offset().top; 


        var window_bottom = scroll_top + windowheight; 
        var div1_bottom = div1top + div1height; 


        if 
        (
         (
          (scroll_top >= div1top) 
          && 
          (scroll_top < div1_bottom) 
         ) 
         || 
         (
          (scroll_top <= div1top) 
          && 
          (window_bottom >= div1_bottom) 
         ) 
         || 
         (
          (scroll_top <= div1top) 
          && 
          (window_bottom > div1top) 
         ) 
        ) { 
         $('body').css('background-color', 'green'); 
        } 
        else { 
         $('body').css('background-color', 'red'); 
        } 
       } 
      </script> 
     </body> 
     </html>

來源

2013-10-30 14:29:57

感謝Kariem。我仍然無法工作。我認爲這與窗口DIV佔用整個窗口的空間有關。var windowheight = window.innerHeight; var div1height = $（'＃div1'）。height（）;'do？ – noob160

var windowheight = window.innerHeight;獲取頁面可見區域的高度和 var div1height = $（'＃div1'）。height（）;獲取div的高度，我們檢查它是否在可見區域內，發佈您使用的代碼，我可以對其進行編輯，以便它能夠正常工作 –

window.onLoad不是function使用

而且fast是string不variable試試這個，

$(function() { 
    if ($('.section5').is(":visible")) { 
     $(".arrow").fadeOut('fast'); 
    } else if ($('.section5').is(":hidden")) { 
     $('.arrow').fadeIn('fast'); 
    } 
});

來源

2013-10-30 12:18:53

我使用嘗試過，但什麼都沒有改變。任何想法可能是什麼？ – noob160

@ noob160再次檢查我的代碼 –

如何隱藏/顯示某個div在視圖中的div？

回答

相關問題