在滚动时显示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和类

回答

相关问题