Question

我有一个单页应用程序，有2个sidenavs（nav1和nav2）和2个不同的div内容。现在我要做的是当我向下滚动并到达class="content2"所在的点时，id="nav2"将显示。然后，如果我向上滚动class="content1"所在的位置，则会显示id="nav1"。默认情况下，将显示nav1。

这里有一些图片来了解这个问题

这是我在content1中的照片。

在content2中

这里有一个示例html fiddle。

提前谢谢你们！

Answer 1

您可以使用$(document).scroll(function()检测文档滚动位置的更改。 scrollTop()方法将提供文档的当前顶部位置，position()是返回包含位置值的对象的方法，top是我们想要的情况。我们只想比较当前文档的最高位置和div顶部位置。

if($(this).scrollTop()>=$('.content2').position().top){表示当前文档位置位于div的顶部位置，类名为.content2。现在我们可以显示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/

Answer 2

我取两个内容区域的高度并使用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>

在滚动和类调用时显示div

2 个答案: