Question

嘿伙计我需要一些帮助。我最近刚刚玩这些代码。我想知道他们如何创建这个滚动选项，就像我向下滚动，一个新的div弹出，当我向上滚动它回到主div Hatshop Website。

这是我的主要代码

<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">。

Answer 2

在示例中，他们使用jQuery.mousewheel.js来检测鼠标滚轮的滚动。当发生这种情况时，使用JavaScript将#main-holder的高度设置为屏幕的高度。

这是home.js

中的一个例子

if (touch==false) {
    $('body').mousewheel(function(e, delta, deltaX, deltaY) {
        if (deltaY>0 && $(window).scrollTop() == 0) {
            e.preventDefault();
            $('#main-holder').css('height', $(window).height());

        }
        if (deltaY<0 && $("#main-holder").height() > 0) {
            e.preventDefault();
            $('#main-holder').css('height', 0);
        }
    });
}

Html / Jquery滚动选项

2 个答案: