在滾動時顯示div和類

我有一個包含2個sidenavs（nav1和nav2）和2個不同內容的div的應用程序。現在我想要做的是當我向下滾動並達到class="content2"那裏的位置時，id="nav2"會顯示。然後如果我向上滾動class="content1"那裏id="nav1"將顯示。由於應該顯示默認的nav1。在滾動時顯示div和類

這裏的一些圖片來理解這個問題有點

這裏就是我在內容1的畫面。

在這裏，在內容2

，這裏是一個樣本html fiddle。

謝謝各位提前！

來源

2016-12-07 kcNeko

您的試用碼在哪裏？ –

@kcNeko看看我的回答 –

您可以使用$(document).scroll(function()來檢測文件的滾動位置的更改。 scrollTop()方法將給出文檔的當前頂部位置，position()是返回包含位置值的對象的方法，top就是我們想要的。我們只是想比較當前文檔的頂部位置和div頂部的位置。

if($(this).scrollTop()>=$('.content2').position().top){這意味着當前文檔位置在類名爲.content2的div的頂部位置。現在我們可以顯示nav2並隱藏nav1。否則顯示nav1和隱藏nav2

$(document).scroll(function() { 
    if($(this).scrollTop()>=$('.content2').position().top){ 
     $("#nav2").show(); 
     $("#nav1").hide(); 
    } 
    else { 
     $("#nav1").show(); 
     $("#nav2").hide(); 
    } 
    })

小提琴：https://fiddle.jshell.net/tintucraju/rjjrmhvt/5/

請注意：position().top從頂部到父計算，如果父母是相對定位。所以最高價值會有輕微的變化。您可以通過將偏移量添加到$(this).scrollTop()進行調整並調整到您想要的位置。

更新提琴：https://fiddle.jshell.net/tintucraju/rjjrmhvt/6/

來源

2016-12-07 04:32:09

這也工作真棒，謝謝！：d – kcNeko

我把兩個內容區域的高度和窗口高度的1/3用作偏移量。您可以根據需要進行修改。

 var content1 = $(".content1").position(); 
 
      content2 = $(".content2").position(); 
 
      offset = $(window).height()/3; 
 

 
     $(document).scroll(function() { 
 
     var y = $(this).scrollTop(); 
 

 
     if (y >= content2.top - offset){ 
 
      $("#nav2").show(); 
 
      $("#nav1").hide(); 
 
     }else{ 
 
      $("#nav2").hide(); 
 
      $("#nav1").show(); 
 
     } 
 
     });

 .container{ 
 
     max-width: 1000px; 
 
     margin: 0 auto 40px auto; 
 
min-height: 800px; 
 
     overflow: hidden; 
 
     clear: both; 
 
     } 
 
     #nav1, #nav2{ 
 
     width: 25%px; 
 
     float: left; 
 
     min-height: 200px; 
 
     border: 2px solid #8a6343; 
 
     position: fixed; 
 
     min-width: 100px; 
 
     } 
 
     #nav2{ 
 
     top: 0; 
 
     display: none; 
 
     } 
 
     .content1, .content2{ 
 
     min-width: 200px; 
 
     width: 60%; 
 
     float: right; 
 
     min-height: 230px; 
 
     border: 2px solid #440044; 
 
     } 
 
     .content2{ 
 
     margin-bottom: 200px; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
     <div id="nav1">nav one</div> 
 
     <div class="content1">Content area 1</div> 
 
    </div> 
 
    <div class="container"> 
 
     <div id="nav2"> nav two</div> 
 
     <div class="content2"> content area 2</div> 
 
    </div>

來源

2016-12-07 04:05:19

謝謝~~！工作：D – kcNeko

在滾動時顯示div和類

回答

相關問題