Привет, ребята, мне нужна помощь. Я в последнее время просто играюсь с кодами. Интересно, как они создают эту опцию прокрутки, например, когда я прокручиваю вниз, появляется новый div, а когда я прокручиваю вверх, он возвращается к основному div Веб-сайт Hatshop.

Это мой основной код 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, поэтому надеюсь, что есть кто-то, кто может мне с этим помочь.

Огромное спасибо :)

3
topacoBoy 26 Окт 2015 в 17:14

2 ответа

Лучший ответ

В этом примере они используют jQuery.mousewheel.js для обнаружения прокрутки колеса мыши. Когда это происходит, высота # main-holder устанавливается равной высоте экрана с помощью JavaScript.

Это один из примеров из 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);
        }
    });
}
1
Philip Broadhead 26 Окт 2015 в 14:26

Вот 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"> во втором контейнере.

2
Viktor Maksimov 26 Окт 2015 в 17:48