滚动以展示功能时固定部分

Question

我正在尝试修复 Section 2 一旦它进入视口并且在每次滚动时左侧的下一段突出显示到另一段并且右侧的 phone 屏幕滑动到下一个一。

因此，在每次滚动时，我都想突出显示下一个文本并更改 phone 内的屏幕，就像您在许多应用登陆页面上看到的那样。

Answer 1

看看这个 - 这是我在这里所做的总结：

我绝对根据我添加的包装器定位 section2 (pin)。
在 resize 侦听器上，我将图钉的高度设置为与 phone 容器相同，以便高度匹配。
在 scroll 侦听器上，我计算 section2 是否开始播放/滑出视图。

查看下面的演示：

var found = false, last = false;;
var lockedScrollTop = 0, step = 0, slide = 1;

var wrapper = $('#wrap');
var pin = $('#pin');
var box = $('#phone');

$(document).resize(function() {
  pin.outerHeight(box.innerHeight());
});

$(document).scroll(function() {
  var offsetTop = -wrapper.offset().top + $(window).scrollTop();
  
  // conditions on scroll from top down
  if(offsetTop >= 0 && offsetTop < wrapper.outerHeight() && !last) {
    slide = 2;
  } else if(offsetTop >= 0 && offsetTop >= wrapper.outerHeight()) {
    if(!last) {
      $(window).scrollTop(lockedScrollTop);
      last = true;
      slide = 3;
    } else {
      slide = 4;
    }
  } 
  
  // conditions of scroll from bottom up
  if(offsetTop >= 0 && offsetTop < wrapper.outerHeight() && slide === 4) {
    last = true;
    slide = 3;
  } else if(offsetTop < 0 && last) {
    last = false;
    $(window).scrollTop(lockedScrollTop + wrapper.outerHeight() - 1);
    slide = 2;
  } else if(offsetTop < 0 && !last) {
    slide = 1;
    // reset
    found = false;
    lockedScrollTop = 0;
    step = 0;
  }
  
  // console.log(slide);
  
  if (slide == 2) {
    if(offsetTop < 0)
      offsetTop = 0;
    pin.css({'top': offsetTop + 'px'});
    if (!found) {
      // calculate step
      lockedScrollTop = wrapper.offset().top;
      step = wrapper.outerHeight() / 4;
      found = true;
    }
    // set/unset active text
    var index = Math.floor(($(window).scrollTop() - lockedScrollTop) / step);
    $('#pin .text-container > p').removeClass('active');
    $('#pin .text-container > p').eq(index).addClass('active');
  } else {
    pin.css({'top': 0});
  }
});

section {
  display: block;
  width: 100%;
  height: 100vh;
  border-bottom: 1px solid red;
}
.phone-container {
  height: 100vh;
  width: 500px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  float: right;
}
.phone {
  width: 200px;
  height: 500px;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
section.long-scroll {
  height: auto;
}
p {
  margin-top: 80px;
}
p:first-child {
  margin-top: 0px;
}
.text-container {
  float: left;
  width: 200px;
}
.spacer {
  display: block;
  width: 100%;
}
p.active {
  color: pink;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix {
  display: inline-block;
}
/* start commented backslash hack \*/

* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
/* close commented backslash hack */

.stuck {
  position: fixed;
  top: 0;
}
.fixed {
  position: fixed;
  top: 0;
}
.sticky-wrapper {
  height: auto !important;
}
.text-container {
  padding-left: 40px;
  padding-top: 40px;
}

/*NEW STYLES ADDED*/
#pin {
  position: absolute;
  right: 0;
  top: 0;
}
#pin.transition {
  transition: top ease 1s;
}
#wrap {
  position: relative;
  border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section>
  Scroll-down
</section>
<section id="wrap">
  <section class="long-scroll clearfix" id="pin">
    <div class="text-container">
      <p class="active">Text - 1</p>
      <p>Text - 2</p>
      <p>Text - 3</p>
      <p>Text - 4</p>
    </div>
    <div class="phone-container" id="phone">
      <div class="phone">Slide-1</div>
    </div>
  </section>
</section>
<section id="unhook"></section>

Answer 2

编辑：

我更新了代码，这是一个新的 JSFiddle。

旧答案：（类似于fullpage.js）

由于您的 HTML 包含部分，您将每个部分的高度设置为 100vh 并使用视差标记标记了 post 我假设如下：

您需要每个部分滚动并填满整个屏幕。
滚动条在这个设置下似乎没用了。
每次鼠标滚轮滚动都需要将整个部分带到屏幕上。
一旦移动部分 phone div 可见，您需要滚动到子元素而不是部分。

因此，我将您的代码更改为以下内容：

var lastScrollPos = 0;
var scrollFired = false;

var textConainersElement = jQuery('.text-container p');
var mainElem = jQuery("[data-main='true']");
var firstElem = jQuery("section:first-child");
var lastElem = jQuery("section:last-child");
var wrapper = jQuery(".wrapper");

jQuery(document).on('DOMMouseScroll mousewheel', function(e) {

  // if the scroll has occrued already then dont fire it again until transition ended
  if (scrollFired == true) {
    jQuery(window).scrollTop(lastScrollPos);
    return false;
  }

  var inviewElem = jQuery("[data-inview='true']");
  var nextElem = inviewElem.next();
  var prevElem = inviewElem.prev();
  var currentTop = parseInt(firstElem.attr('data-top'));



  if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
    // Scrolling down 
    // if viewed element is last element do nothing
    if (inviewElem.index() >= lastElem.index())
      return false;

    // if main section is inview then scroll through its elements
    if (inviewElem.index() == mainElem.index()) {
      // if the active child is not the last element then process
      var active = jQuery('.text-container .active');
      if (active.index() != textConainersElement.length - 1) {
        jQuery('.text-container .active').removeClass('active').next().addClass('active');

        // Dont scroll further
        return false;
      }
    }

    var top = currentTop + 100;
    firstElem.css("margin-top", "-" + top + "vh").attr("data-top", top);
    nextElem.attr("data-inview", 'true');
    inviewElem.attr("data-inview", 'false');

  } else {
    // Scrolling up 
    // if viewed element is first element do nothing
    if (inviewElem.index() <= firstElem.index())
      return false;

    // if main section is inview then scroll through its elements
    if (inviewElem.index() == mainElem.index()) {
      // if the active child is not the last element then process
      var active = jQuery('.text-container .active');
      if (active.index() != 0) {
        jQuery('.text-container .active').removeClass('active').prev().addClass('active');

        // Dont scroll further
        return false;
      }
    }

    var top = currentTop - 100;
    firstElem.css("margin-top", "-" + top + "vh").attr("data-top", top);
    prevElem.attr("data-inview", 'true');
    inviewElem.attr("data-inview", 'false');
  }

  // Set values to use for next scrolling event
  lastScrollPos = jQuery(window).scrollTop();
  scrollFired = true;

  // reset scrollFired var after transition ended
  firstElem.one('transitionend', function() {
    scrollFired = false;
  });

  //prevent page fom scrolling
  return false;
});

body {
  margin: 0;
}

.wrapper {
  display: block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

section {
  display: block;
  width: 100%;
  height: 100vh;
  border-bottom: 2px dashed black;
  position: relative;
  transition: all 0.5s;
  background-color: #c4c4c4;
}

section[data-inview="true"] {
  background-color: #929292;
}

.phone-container {
  align-items: center;
  background: #dedede none repeat scroll 0 0;
  border-left: 5px solid black;
  display: flex;
  float: right;
  height: 100vh;
  justify-content: center;
  width: 500px;
}

.phone {
  width: 200px;
  height: 500px;
  background: #A6A6A6 none repeat scroll 0 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

section.long-scroll {
  height: auto;
}

p {
  margin-top: 80px;
}

p:first-child {
  margin-top: 0px;
}

.text-container {
  float: left;
  width: 200px;
}

.spacer {
  display: block;
  width: 100%;
}

p.active {
  color: #C1E7FF;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.clearfix {
  display: inline-block;
}


/* start commented backslash hack \*/

* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}


/* close commented backslash hack */

.stuck {
  position: fixed;
  top: 0;
}

.fixed {
  position: fixed;
  top: 0;
}

.sticky-wrapper {
  height: auto !important;
}

.text-container {
  padding-left: 40px;
  padding-top: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
  <section data-inview='true' data-top='0'>
    Scroll-down
  </section>
  <section class="long-scroll clearfix" id="pin" data-main='true'>
    <div class="text-container">
      <p class="active">Text - 1</p>
      <p>Text - 2</p>
      <p>Text - 3</p>
      <p>Text - 4</p>
    </div>

    <div class="phone-container">
      <div class="phone">Slide-1</div>
    </div>
  </section>
  <section id="unhook"></section>
</div>

我对代码进行了注释以使其易于理解，这里还有一个具有相同代码的 jsfiddle：https://jsfiddle.net/8zgsdzy0/。

Answer 3

类似这个？ http://codepen.io/jkochis/pen/ZBxgKd

JS

$(document).ready(function () {
    $(document).on("scroll", onScroll);

    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");

        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');

        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
      console.log($('#menu-center ul li a.active').attr("href"), $('#menu-center a:eq(0)').attr("href"));
      if($('#menu-center ul li a.active').attr("href") !== $('#menu-center a:eq(0)').attr("href")) {
        $('body').addClass('fixed-product');
      } else {
        $('body').removeClass('fixed-product');
      }
    });
}

HTML

<div class="m1 menu">
    <div id="menu-center">
        <ul>
            <li><a class="active" href="#section1">Section 1</a>

            </li>
            <li><a href="#section2">Section 2</a>

            </li>
            <li><a href="#section3">Section 3</a>

            </li>
            <li><a href="#section4">Section 4</a>

            </li>
        </ul>
    </div>
</div>
<div id="section1"></div>
<div id="section2">
  <div class="product">PRODUCT</div>
</div>
<div id="section3"></div>
<div id="section4"></div>

CSS

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.menu {
    width: 200px;
    height: 400px;
    background-color: rgba(0, 0, 0, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.light-menu {
    width: 100%;
    height: 75px;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#menu-center {
    width: 980px;
    height: 75px;
    margin: 0 auto;
}
#menu-center ul {
    margin: 15px 0 0 0;
}
#menu-center ul li {
    list-style: none;
    margin: 0 30px 0 0;
    display: block;
}
.active {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
}
a {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: black;
    text-decoration: none;
    line-height: 50px;
}
#section1 {
    background-color: grey;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#section2 {
    height: 100%;
    width: 100%;
}
#section3 {
    background-color: blue;
    height: 100%;
    width: 100%;
}
#section4 {
    background-color: red;
    height: 100%;
    width: 100%;
}
.product {
  background: yellow;
  float: right;
  padding: 100px
}
.fixed-product .product {
  position: fixed;
  top: 0;
  right: 0;
}

免责声明：我发现了这个 JSFiddle：https://jsfiddle.net/cse_tushar/Dxtyu/141/ 并以此为基础建立了我的 Codepen。

滚动以展示功能时固定部分

Pinning a section when you scroll to showcase features

jquery

html

scroll

parallax

sticky