釘住一節當您滾動展示功能

Question

我試圖修復Section 2一旦涉及到視口，每個滾動左側亮點下段到另一個，並在手機屏幕上向右滑動到下一個。

所以在每一個滾動我想強調的下一個文本和更改sceen手機內部就像你在許多應用着陸頁中看到。

Here's a demo

Answer 1

檢查了這一點 - 這裏是什麼，我在這裏做一個總結：

1. 我絕對相對於定位第2節（pin）的包裝，我加入了它。

2. 在resize聽衆上，我將銷高度設置爲與phone容器相同，以便高度匹配。

3. 在一個scroll監聽我計算，如果第2節進場/滑出視圖。

請參見下面的演示：

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你標記有視差的標記您的文章我假設如下：

• 您需要每個部分滾動並填充整個屏幕。
• 滾動條在此設置中似乎沒用。
• 每個鼠標滾輪都需要將整個部分放到屏幕上。
• 一旦與手機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。