jquery - Html/Jquery 滚动选项

Question

我最近只是在玩代码。我想知道他们是如何创建这个滚动选项的，比如当我向下滚动时，会弹出一个新的 div，当我向上滚动时，它会返回到主 div Hatshop Website .

这是我的主div代码

<div class="container-fluid">'
  <div class="row">
    <div class="col-md-2 col-lg-2" id="main">
      <p>&nbsp;</p>
      <h1 class="TradeMeIcon">TRADEME</h1>
      <div>
        <ul class="ulBody">
          <li class="liTag">ABOUT</li>
          <li class="liTag">HELLO</li>
          <li class="liTag">I</li>
          <li class="liTag">AM</li>
          <li class="liTag">POTATO</li>
        </ul>
      </div>
      <div>
        <img class="arrowSetting" id="show" src="downArrow.png" />
      </div>
    </div>
    <div class="col-md-10 col-lg-10">
    </div>
  </div>
</div>

这是我希望在向上或向下滚动时弹出的第二个 div:

<div class="container-fluid">
  <div class="row" id="ItemDisplay" style="display:none">
    <div class="col-lg-12 itemdisplaybody" style="border:1px solid black">
      <img class="homeButton" id="hide" src="home.png" />
      <div class="trade col-lg-6">
        <h3>UP FOR</h3>
        <h1>Cooking</h1>
      </div>
      <div class="sell col-lg-6">
        <h3>UP FOR</h3>
        <h1>baking</h1>
      </div>
    </div>
  </div>
</div>

这是我的箭头按钮的 jQuery :

$(document).ready(function() {
  $("#show").click(function() {
    $("#main").hide();
    $("#ItemDisplay").toggle('slow');
    $("#ItemDisplay").css({
      display: "block"
    });

  });
});

$(document).ready(function() {
  $("#hide").click(function() {
    $("#main").toggle('slow');
    $("#main").css({
      display: "block"
    });
    $("#ItemDisplay").hide();
  });
});

我的 CSS 代码:

body {
  /*background-image: url('../jumbotronimg.jpg');*/
  
  width: 100%;
  height: 100%;
}

.container-fluid:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  background: #fff;
}

.ulBody {
  text-align: right;
  top: 130;
  list-style-type: none;
  position: relative;
  color: black;
  opacity: 1;
}

.leftBody {
  /*background :black;
opacity: 0.3;*/
  
  height: 100%;
}

.liTag {
  margin-top: 14;
}

.arrowSetting {
  position: relative;
  top: 182;
}

.homeButton {
  position: fixed;
  top: -20;
  right: -91;
  float: right;
  height: 10%;
}

.col3 {}

.TradeMeIcon {
  position: relative;
  top: 50;
  text-align: center;
}

.itemdisplayBody {
  background-color: blue;
}

.trade {
  text-align: center;
}

.sell {
  text-align: center;
}

顺便说一句，我是 jQuery 的新手，所以我希望有人可以帮助我。

非常感谢:)

Answer 1

这是 jsfiddle - https://jsfiddle.net/f0o1p2r7/9/与工作代码。这是代码:

1.首先包含CSS代码:

.container-fluid:first-child { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; background: #fff; }
#show, #hide { cursor: pointer; }

2.之后包括这个脚本:

_height = $(window).height();

$(document).ready(function(){
    $('.container-fluid:first').height(_height);

    $('#show').click(function(){
        show_container();
    });

    $('#hide').click(function(){
        hide_container();
    });
});


$(window,'html')
.on('mousewheel',function(e){
    var e = window.event || e; // old IE support
    //if(e.originalEvent.lenth){e=event.originalEvent[0];}
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail || -e.originalEvent.detail)));
    switch(delta){
        case 1:
            if ($(window).scrollTop() == 0){

                hide_container();
            }
            break;
        case -1:
            if ($('.container-fluid:first').height() > 0) {
                show_container();
                return false;
            };
            break;
    }
});

function show_container(){
    $('.container-fluid:first').stop(true, true).animate({'height' : '0px'}, 500);
}

function hide_container(){
    $('.container-fluid:first').animate({'height' : _height}, 500);
}

3.最后你需要删除style="display:none"来自 <div class="row" id="ItemDisplay" style="display:none">在第二个容器中。