javascript - 滚动整页

Question

这是我写的一些不使用 fullpage.js 的代码我想将其更改为 scrollTop 而不是相对位置和“top”:-_.index() * 100 + "%"with overflow:hidden

请告诉我怎么做。我附上了顶部菜单 (header-bg) 和一个搜索包装器。

New JSFiddle

JQuery:

 $(document).ready(function() {
        onLoad();
        NavAnimation();
        DesktopResize();
        $("body").css({
          overflow: 'hidden'
        });

        /*$(window).bind('scroll', function() {
             if ($(window).scrollTop() > 726) {
                 $('.search-wrapper').addClass('fixed');
             }
             else {
                 $('.search-wrapper').removeClass('fixed');
             }
        }); */  
      });

      function DesktopResize(){
        $(".section, .fullpage, html, body").css({
          height: '100%',
          width: '100%'
        });
      }

function NavAnimation(){
    scroll.call(active, true);
  }

  var active = null;
  function scroll(silent){
    var _;
    if (active === null) {
      _ = $(".section").first();
    } else {
      active.removeClass("active");
      _ = $(this);
    }
    if (_.length === 0) return;
    if (active !== null || silent === false) {
      $(".fullpage").animate({"top": -_.index() * 100 + "%"}, 1000);
    }
    active = _;

  }

  function onLoad() {
      $(".navigation li").click(scroll);
      scroll();
  }

  var wheel = true;
window.addEventListener('wheel', function(event) {
  if (wheel) {
    wheel = false;
    if (event.deltaY > 0) {
      scroll.call(active.next());
    } else {
      scroll.call(active.prev());
    }
    setTimeout(function () {
      wheel = true;
    }, 1000)
  }
});
window.addEventListener('mousewheel', function(event) {
  if (wheel) {
    wheel = false;
    if (event.wheelDelta < 0) {
      scroll.call(active.next());
    } else {
      scroll.call(active.prev());
    }
    setTimeout(function () {
      wheel = true;
    }, 1000)
  }
});

HTML:

    <div class="header-bg">
      <div class="header-content">
        <div class="navigation">
          <ul>
            <li id="NavWho">Rules</li>
            <li id="NavMission">Arrivante Miles</li>
            <li id="NavApproach">Prices</li>
          </ul>
        </div>
      </div>
    </div>
<div id="fullpage" class="fullpage">
  <div class="section">
    <br>
        <br><br>
            <br>
    <div class="search-wrapper">
      <div class="explain">Type your initial<br> flight number here:</div>
      <div class="input">
        <input type="text" placeholder="Example: FR22">
      </div>
      <div class="button">
        <button class="search">Book transfer</button>
      </div>
    </div>
  </div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
</div>

CSS:

    html, body {
    background: #d8e6e3;
    position: relative;
    }

.section{
    height: 100% !important;
    width: 100%;
}

.header-bg{
  background: #242928;
  color: #879996;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 500;
}

.header-bg .header-content{
  max-width: 1800px;
  margin: 0 auto;
  font-family: "HelveticaNeue-roman";
  text-transform: uppercase;
}

.header-content .login{
  background: url("../image/login-ico.png") no-repeat;
  background-position: 0 0;
  height: 15px;
  width: auto;
  padding: 0px 0 0 35px;
  margin: 25px 0 0 30px;
  float: left;
  cursor: pointer;
}

.header-content .navigation{
  margin: 0 auto;
  max-width: 486px;
}
 .header-content .navigation ul{
  list-style-type: none;
  font-size: 0;
}

.header-content .navigation ul li{
  display: inline-block;
  font-size: 14px;
  padding: 25px 25px 25px 25px;
  cursor: pointer;
}

.fullpage{
  position: relative;
}

.section{
  padding: 66px 0 0 0;
  margin: 0 auto;
  max-width: 1800px;
}

.section .header-image{
  position: relative;
}

.section .header-image .header-bg-image{
  width: 100%;
  height: 659px;
  background: url("../image/head-1.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.section .header-image .main-logo{
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -120px;
}

.section .search-wrapper{
  font-size: 0;
  position: relative;
}

.search-wrapper .explain,
.search-wrapper .input,
.search-wrapper .button{
  display: inline-block;
  vertical-align: top;
}

.search-wrapper .explain{
  padding: 26px 0 22px 24px;
  font-family: "HelveticaNeue-roman";
  font-size: 14px;
  line-height: 16px;
  color: #586664;
  text-transform: uppercase;
  background: #fffce5;
  width: calc(20% - 24px);
}

.search-wrapper .input{
  width: 60%;
  font-size: 14px;
}

.search-wrapper .input input{
  border: none;
  padding: 26px 0 11px 26px;
  font-size: 36px;
  line-height: 36px;
  color: #bcccc9;
  width: calc(100% - 26px);
  font-family: "HelveticaNeue-thin";
}

.search-wrapper .button{
  width: 20%;
  height: 100%;
  font-size: 14px;
  font-family: "HelveticaNeue-roman";
}

.search-wrapper .button .search{
  font-family: "HelveticaNeue-roman";
  font-size: 32px;
  line-height: 32px;
  color: #fff;
  background: #ff4255;
  width: 100%;
  height: 80px;
  border: none;
  cursor: pointer;
  outline: none;
}

Answer 1

好吧，还是不太确定你到底想要什么，但看看这里:

$(document).ready(function () {

    $(".navigation li").click(function () {
        activeSection = $(this).index();
        scrollMeToSection();
    });
    var activeSection = 0;
    var wheel = true;

    function scrollMeToSection() {
        $('body').animate({
            scrollTop: ($(window).height() * activeSection)
        }, '1000', 'swing', function () {
            // can do something when finishes animating here.
        });
    }

    $(window).on('mousewheel DOMMouseScroll', function (event) {
        console.log(event);
        event.preventDefault();
        event.stopPropagation();
        if (wheel) {
            wheel = false;
            var goingUp = event.originalEvent.deltaY > 0 ? false : true;
            if (activeSection === 0 && goingUp) {
                wheel = true;
                return;
            }
            activeSection = goingUp ? (activeSection - 1) : (activeSection + 1);
            if (activeSection == $('.section').length) {
                activeSection = $('.section').length - 1;
            }
            scrollMeToSection();
            setTimeout(function () {
                wheel = true;
            }, 1000);
        }
    });

});

演示:http://jsfiddle.net/robschmuecker/yYJ3z/

这适用于鼠标滚轮滚动，但不适用于滚动条滚动(这是一个非常复杂的管理过程)。