jQuery窗口。滚动功能障碍

Question

我在这里包括整个代码，它是一个基于div ID显示当前位置的带有滚动菜单（jQuery）的视差网站（所有css）的骨骼。

视差CSS和菜单jQuery在分离时工作得很好，但组合时会出现功能障碍。

我通过将其记录在控制台中，并在滚动时鼠标指针悬停在主内容框架（.parallax）上的任何时候，都不会记录任何内容，从而将其缩小到window.scroll。有没有办法确保窗口的属性和滚动位置被记录，而不管正文部分是什么？

jQuery(document).ready(function() { 
 
    console.log('got here'); 
 
    jQuery(window).scroll(function() { 
 
    console.log('Log this'); 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 

 
    var debugInput = document.querySelector("input"); 
 

 
    function updateDebugState() { 
 
    document.body.classList.toggle('debug-on', debugInput.checked); 
 
    } 
 
    debugInput.addEventListener("click", updateDebugState); 
 
    updateDebugState(); 
 

 
    var lastId, 
 
    sideMenu = $(".ssb00"), 
 
    menuItems = sideMenu.find("a"), 
 
    scrollItems = menuItems.map(function() { 
 
     var item = $($(this).attr("href")); 
 
     if (item.length) { 
 
     return item; 
 
     } 
 
    }); 
 

 
    menuItems.click(function(e) { 
 
    var href = $(this).attr("href"), 
 
     offsetTop = href === "#" ? 0 : $(href).offset().top; 
 
    $(window).stop().animate({ 
 
     scrollTop: offsetTop 
 
    }, 300); 
 
    e.preventDefault(); 
 
    }); 
 

 
    $(window).scroll(function() { 
 
    var fromTop = $(this).scrollTop(); 
 

 
    var cur = scrollItems.map(function() { 
 
     if ($(this).offset().top < fromTop) 
 
     return this; 
 
    }); 
 
    cur = cur[cur.length - 1]; 
 
    var id = cur && cur.length ? cur[0].id : ""; 
 

 
    if (lastId !== id) { 
 
     lastId = id; 
 
     menuItems 
 
     .parent().removeClass("active") 
 
     .end().filter("[href='#" + id + "']").parent().addClass("active"); 
 
    } 
 
    }); 
 

 
    $(function() { 
 

 
    var scroll = 0; 
 
    $(window).scroll(function(event) { 
 
     var moved = $(this).scrollTop(); 
 
     var headerSize = 20 
 
     if (moved > headerSize) { 
 
     $('.ssb00').css({ 
 
      'opacity': '1', 
 
      'right': '10px' 
 
     }) 
 
     $('.ssb01').css({ 
 
      'opacity': '0', 
 
     }) 
 
     } 
 

 
     if (moved === 0) { 
 
     $('.ssb00').css({ 
 
      'opacity': '0', 
 
      'right': '-40px' 
 
     }) 
 
     $('.ssb01').css({ 
 
      'opacity': '1', 
 
     }) 
 
     } 
 
     if (moved > headerSize) {} 
 
     headerSize = moved; 
 
    }); 
 
    }); 
 

 
});

@charset "UTF-8"; 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: Helvetica; 
 
} 
 

 
.ssb00 { 
 
    z-index: 100; 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100%; 
 
    top: 100px; 
 
    opacity: 0; 
 
} 
 

 
#menLogo { 
 
    z-index: 110; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 8px; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-image: url(img/Logo-300x244.png); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 

 
.ssb00_inWrap { 
 
    height: 200px; 
 
    position: relative; 
 
    top: calc(50vh - 150px); 
 
} 
 

 
.m00 { 
 
    height: 33px; 
 
} 
 

 
.m00 div { 
 
    position: absolute; 
 
    -webkit-transition: all .5s ease; 
 
    -moz-transition: all .5s ease; 
 
    -ms-transition: all .5s ease; 
 
    -o-transition: all .5s ease; 
 
    transition: all .5s ease; 
 
} 
 

 
.m01 { 
 
    text-align: left; 
 
    right: 0; 
 
    width: 16px; 
 
} 
 

 
.m01:before { 
 
    content: '•'; 
 
} 
 

 
.m02 { 
 
    left: 200px; 
 
    width: calc(100% - 26px); 
 
    opacity: 0; 
 
    text-align: right; 
 
} 
 

 
.ssb00_inWrap:hover .m02 { 
 
    left: 0px; 
 
    opacity: 1; 
 
} 
 

 
.ssb00 a { 
 
    color: #fff; 
 
} 
 

 
.ssb00 a:hover { 
 
    color: #6ccef5; 
 
} 
 

 
.active .m02 { 
 
    left: 0px; 
 
    opacity: 1; 
 
} 
 

 
.active a { 
 
    color: #1b75ba; 
 
} 
 

 
.ssb01 { 
 
    z-index: 100; 
 
    background: rgba(255, 255, 255, .9); 
 
    border-bottom: 1px solid #f0f0f0; 
 
    height: 100px; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.ssb01 .nav { 
 
    font-weight: bold; 
 
    width: 560px; 
 
    height: 30px; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 10px; 
 
    text-align: left; 
 
} 
 

 
.ssb01 a { 
 
    color: #1b75ba; 
 
    text-decoration: none; 
 
    margin: 0px 15px; 
 
} 
 

 
.ssb01 a:hover { 
 
    color: #6ccef5; 
 
} 
 

 
.ssb01 a:active { 
 
    color: #fff; 
 
} 
 

 
.ssb01__info { 
 
    position: absolute; 
 
    height: 45px; 
 
    padding: 14px 20px; 
 
    left: 110px; 
 
    top: 15px; 
 
    color: #666; 
 
    opacity: 1; 
 
} 
 

 
.trans { 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 

 
.parallax { 
 
    height: 100vh; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    -webkit-perspective: 300px; 
 
    perspective: 300px; 
 
} 
 

 
.parallax__group { 
 
    position: relative; 
 
    height: 100vh; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
} 
 

 
.parallax__layer { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
.parallax__layer--fore { 
 
    -webkit-transform: translateZ(90px) scale(.7); 
 
    transform: translateZ(90px) scale(.7); 
 
    z-index: 1; 
 
} 
 

 
.parallax__layer--base { 
 
    -webkit-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
    z-index: 4; 
 
} 
 

 
.parallax__layer--back { 
 
    -webkit-transform: translateZ(-300px) scale(2); 
 
    transform: translateZ(-300px) scale(2); 
 
    z-index: 3; 
 
} 
 

 
.parallax__layer--deep { 
 
    -webkit-transform: translateZ(-600px) scale(3); 
 
    transform: translateZ(-600px) scale(3); 
 
    z-index: 2; 
 
} 
 

 
.debug { 
 
    position: fixed; 
 
    top: 0; 
 
    left: .5em; 
 
    z-index: 999; 
 
    background: rgba(0, 0, 0, .85); 
 
    color: #fff; 
 
    padding: .5em; 
 
    border-radius: 0 0 5px 5px; 
 
} 
 

 
.debug-on .parallax__group { 
 
    -webkit-transform: translate3d(800px, 0, -800px) rotateY(30deg); 
 
    transform: translate3d(700px, 0, -800px) rotateY(30deg); 
 
} 
 

 
.debug-on .parallax__layer { 
 
    box-shadow: 0 0 0 2px #000; 
 
    opacity: 0.9; 
 
} 
 

 
.parallax__group { 
 
    -webkit-transition: -webkit-transform 0.5s; 
 
    transition: transform 0.5s; 
 
} 
 

 
.parallax { 
 
    font-size: 200%; 
 
} 
 

 
.title { 
 
    text-align: center; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
#Xabout { 
 
    z-index: 3; 
 
    /* slide under groups 1 and 3 */ 
 
} 
 

 
#Xabout .parallax__layer--back { 
 
    background: #6ba1ff; 
 
} 
 

 
#aboutGal { 
 
    z-index: 5; 
 
    /* slide over group 2 */ 
 
} 
 

 
#aboutGal .parallax__layer--base { 
 
    background: #c4daff; 
 
} 
 

 
#Xconcept { 
 
    z-index: 3; 
 
    /* slide under groups 1 and 3 */ 
 
} 
 

 
#Xconcept .parallax__layer--back { 
 
    background: #7ae570; 
 
} 
 

 
#conceptGal { 
 
    z-index: 4; 
 
    /* slide over group 2 and 4 */ 
 
} 
 

 
#conceptGal .parallax__layer--base { 
 
    background: #adffa5; 
 
} 
 

 
#Xbroadcast { 
 
    z-index: 2; 
 
    /* slide under group 3 and 5 */ 
 
} 
 

 
#Xbroadcast .parallax__layer--back { 
 
    background: #f0f760; 
 
} 
 

 
#broadcastGal { 
 
    z-index: 3; 
 
    /* slide over group 4 and 6 */ 
 
} 
 

 
#broadcastGal .parallax__layer--base { 
 
    background: #fcffbc; 
 
} 
 

 
#Xdigital { 
 
    z-index: 2; 
 
    /* slide under group 5 and 7 */ 
 
} 
 

 
#Xdigital .parallax__layer--back { 
 
    background: #42e2f4; 
 
} 
 

 
#digitalGal { 
 
    z-index: 3; 
 
    /* slide over group 7 */ 
 
} 
 

 
#digitalGal .parallax__layer--base { 
 
    background: #aaf6ff; 
 
} 
 

 
#Xdesign { 
 
    z-index: 2; 
 
    /* slide under group 5 and 7 */ 
 
} 
 

 
#Xdesign .parallax__layer--back { 
 
    background: #e59172; 
 
} 
 

 
#designGal { 
 
    z-index: 3; 
 
    /* slide over group 7 */ 
 
} 
 

 
#designGal .parallax__layer--base { 
 
    background: #ffe1d6; 
 
} 
 

 
#Xcontact { 
 
    z-index: 2; 
 
    /* slide under group 5 and 7 */ 
 
} 
 

 
#Xcontact .parallax__layer--back { 
 
    background: rgb(245, 235, 100); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div class="debug"> 
 
    <label><input type="checkbox"> Debug</label> 
 
    </div> 
 

 
    <div id="menLogo"></div> 
 
    <div class="ssb01 trans"> 
 
    <div class="ssb01__info"> 
 
     <span>bill o'day</span> 
 
     <br /> 
 
     <span>creative director | art</span> 
 
    </div> 
 
    <div class="nav"> 
 
     <a href="#about">About</a> 
 
     <a href="#concept">Concept</a> 
 
     <a href="#broadcast">Broadcast</a> 
 
     <a href="#digital">Digital</a> 
 
     <a href="#design">Design</a> 
 
     <a href="#contact">Contact</a> 
 
    </div> 
 
    </div> 
 

 
    <div class="ssb00 trans"> 
 
    <div class="ssb00_inWrap"> 
 
     <div class="m00 men-1 active"> 
 
     <a href="#about"> 
 
      <div class="m01 mm-1"></div> 
 
      <div class="m02 mm-1">About</div> 
 
     </a> 
 
     </div> 
 
     <div class="m00 men-2 active"> 
 
     <a href="#concept"> 
 
      <div class="m01 mm-2"></div> 
 
      <div class="m02 mm-2">Concept</div> 
 
     </a> 
 
     </div> 
 
     <div class="m00 men-3 active"> 
 
     <a href="#broadcast"> 
 
      <div class="m01 mm-3"></div> 
 
      <div class="m02 mm-3">Broadcast</div> 
 
     </a> 
 
     </div> 
 
     <div class="m00 men-4 active"> 
 
     <a href="#digital"> 
 
      <div class="m01 mm-4"></div> 
 
      <div class="m02 mm-4">Digital</div> 
 
     </a> 
 
     </div> 
 
     <div class="m00 men-5 active"> 
 
     <a href="#design"> 
 
      <div class="m01 mm-5"></div> 
 
      <div class="m02 mm-5">Design</div> 
 
     </a> 
 
     </div> 
 
     <div class="m00 men-6 active"> 
 
     <a href="#contact"> 
 
      <div class="m01 mm-6"></div> 
 
      <div class="m02 mm-6">Contact</div> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 

 
    <div class="parallax"> 
 
    <div id="Xabout" class="parallax__group"> 
 
     <div id="about" class="parallax__layer parallax__layer--base"> 
 
     <div class="title">hello</div> 
 
     </div> 
 
     <div class="parallax__layer parallax__layer--back"> 
 
     <div class="title">ABOUT BG</div> 
 
     </div> 
 
    </div> 
 

 
    <div id="aboutGal" class="parallax__group"> 
 
     <div class="parallax__layer parallax__layer--base"> 
 
     <div class="title">ABOUT GAL</div> 
 
     </div> 
 
    </div> 
 

 

 
    <div id="Xconcept" class="parallax__group"> 
 
     <div id="concept" class="parallax__layer parallax__layer--base"> 
 
     <div class="title">concepts</div> 
 
     </div> 
 
     <div class="parallax__layer parallax__layer--back"> 
 
     <div class="title">Concepts BG</div> 
 
     </div> 
 
    </div> 
 
    <div id="conceptGal" class="parallax__group"> 
 
     <div class="parallax__layer parallax__layer--base"> 
 
     <div class="title">CONCEPTS GAL</div> 
 
     </div> 
 
    </div> 
 

 

 
    <div id="Xbroadcast" class="parallax__group"> 
 
     <div id="broadcast" class="parallax__layer parallax__layer--base"> 
 
     <div class="title">broadcast</div> 
 
     </div> 
 
     <div class="parallax__layer parallax__layer--back"> 
 
     <div class="title">BROADCAST BG</div> 
 
     </div> 
 
    </div> 
 
    <div id="broadcastGal" class="parallax__group"> 
 
     <div class="parallax__layer parallax__layer--base"> 
 
     <div class="title">BROADCAST GAL</div> 
 
     </div> 
 
    </div> 
 

 

 
    <div id="Xdigital" class="parallax__group"> 
 
     <div id="digital" class="parallax__layer parallax__layer--base"> 
 
     <div class="title">digital</div> 
 
     </div> 
 
     <div class="parallax__layer parallax__layer--back"> 
 
     <div class="title">DIGITAL BG</div> 
 
     </div> 
 
    </div> 
 
    <div id="digitalGal" class="parallax__group"> 
 
     <div class="parallax__layer parallax__layer--base"> 
 
     <div class="title">DIGITAL GAL</div> 
 
     </div> 
 
    </div> 
 

 
    <div id="Xdesign" class="parallax__group"> 
 
     <div id="design" class="parallax__layer parallax__layer--base"> 
 
     <div class="title">design</div> 
 
     </div> 
 
     <div class="parallax__layer parallax__layer--back"> 
 
     <div class="title">DESIGN BG</div> 
 
     </div> 
 
    </div> 
 
    <div id="designGal" class="parallax__group"> 
 
     <div class="parallax__layer parallax__layer--base"> 
 
     <div class="title">DESIGN GAL</div> 
 
     </div> 
 
    </div> 
 

 
    <div id="Xcontact" class="parallax__group"> 
 
     <div id="contact" class="parallax__layer parallax__layer--base"> 
 
     <div class="title">contact</div> 
 
     </div> 
 
     <div class="parallax__layer parallax__layer--back"> 
 
     <div class="title">CONTACT BG</div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

编辑：

我已经改变了我的JS .scroll命令把重点放在.parallax格，因为这真的是应该测量，现在登录就好了。但点击侧边菜单中的项目仍然会滚动到位置，就好像它有30％的整体视图。

所以我觉得现在的问题是，特别是这一行：

offsetTop = href === "#" ? 0 : $(href).offset().top; 

的scrollTop的和的offsetTop结果似乎被关闭。我试图弄清楚，但我很慢。任何帮助，将不胜感激。

Answer 1

那么，您需要听取.parallax的滚动权限吗？
你没有尝试过吗？

$(".parallax").scroll(function() { // Added, just to console.log the scroll events. 
    console.log('Log this Parallax'); 
}); 

---

在你的脚本，我摆脱了多 ready包装的。

$(document).ready(function() {与$(function() {相同
一个是另一个的简称。
像这样的多个后续包装是没用的...并且也是嵌套的。

---

我也改变了这个（ 而这正是解决上滚动你的身边菜单抵消备份）：

$(".parallax").scroll(function() {  // Changed $(window) to $(".parallax") 
    var fromTop = $(window).scrollTop(); // Changed $(this) to $(window) 
    // ... 

---

我也固定在侧菜单链接点击处理程序是这样的：

menuItems.click(function(e) { 
    var href = $(this).attr("href"); // changed the coma to a semi-colon. 
    var offsetTop = href.offset().top; // Added var and removed the useless ternary operator: href === "#" ? 0 : $(href).offset().top; 
    $(".parallax").stop().animate({  // Changed $(window") to $(".parallax") 
    scrollTop: offsetTop 
    }, 300); 
    e.preventDefault(); 
}); 

菜单的外观（顶部和侧面）仍然有一个小故障...
这是因为您使用opacity而不是display来控制显示/隐藏。
这也是页面底部白色带的来源。

我留下了一些对你的工作;）

看到它在CodePen和下面的代码片段（但单击“全页面”链接）。

$(document).ready(function() { 
 
    console.log('got here'); 
 
    $(window).scroll(function() { 
 
    //console.log('Log this'); 
 
    }); 
 
    $(".parallax").scroll(function() { // Added, just to console.log the scroll events. 
 
    //console.log('Log this Parallax'); 
 
    }); 
 
    //}); 
 

 
    //$(document).ready(function() { 
 

 
    var debugInput = document.querySelector("input"); 
 

 
    function updateDebugState() { 
 
    document.body.classList.toggle('debug-on', debugInput.checked); 
 
    } 
 
    debugInput.addEventListener("click", updateDebugState); 
 
    updateDebugState(); 
 

 
    var lastId, 
 
     sideMenu = $(".ssb00"), 
 
     menuItems = sideMenu.find("a"), 
 
     scrollItems = menuItems.map(function() { 
 
     var item = $($(this).attr("href")); 
 
     if (item.length) { 
 
      return item; 
 
     } 
 
     }); 
 

 
    menuItems.click(function(e) { 
 
    var href = $(this).attr("href"); // changed the coma to a semi-colon. 
 
    var offsetTop = href.offset().top; // Added var and removed the useless ternary operator: href === "#" ? 0 : $(href).offset().top; 
 
    $(".parallax").stop().animate({  // Changed $(window") to $(".parallax") 
 
     scrollTop: offsetTop 
 
    }, 300); 
 
    e.preventDefault(); 
 
    }); 
 

 
    $(".parallax").scroll(function() {  // Changed $(window) to $(".parallax") 
 
    var fromTop = $(window).scrollTop(); // Changed $(this) to $(window) 
 

 
    var cur = scrollItems.map(function() { 
 
     if ($(this).offset().top < fromTop) 
 
     return this; 
 
    }); 
 
    cur = cur[cur.length - 1]; 
 
    var id = cur && cur.length ? cur[0].id : ""; 
 

 
    if (lastId !== id) { 
 
     lastId = id; 
 
     menuItems 
 
     .parent().removeClass("active") 
 
     .end().filter("[href='#" + id + "']").parent().addClass("active"); 
 
    } 
 
    }); 
 

 
    //$(function() { 
 

 
    var scroll = 0; 
 
    $(window).scroll(function(event) { 
 
    var moved = $(this).scrollTop(); 
 
    var headerSize = 20 
 
    if (moved > headerSize) { 
 
     $('.ssb00').css({ 
 
     'opacity': '1', 
 
     'right': '10px' 
 
     }) 
 
     $('.ssb01').css({ 
 
     'opacity': '0', 
 
     }) 
 
    } 
 

 
    if (moved === 0) { 
 
     $('.ssb00').css({ 
 
     'opacity': '0', 
 
     'right': '-40px' 
 
     }) 
 
     $('.ssb01').css({ 
 
     'opacity': '1', 
 
     }) 
 
    } 
 
    if (moved > headerSize) {} 
 
    headerSize = moved; 
 
    }); 
 
    //}); 
 

 
});

@charset "UTF-8"; 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: Helvetica; 
 
} 
 

 
.ssb00 { 
 
    z-index: 100; 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100%; 
 
    top: 100px; 
 
    opacity: 0; 
 
} 
 

 
#menLogo { 
 
    z-index: 110; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 8px; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-image: url(img/Logo-300x244.png); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 

 
.ssb00_inWrap { 
 
    height: 200px; 
 
    position: relative; 
 
    top: calc(50vh - 150px); 
 
} 
 

 
.m00 { 
 
    height: 33px; 
 
} 
 

 
.m00 div { 
 
    position: absolute; 
 
    -webkit-transition: all .5s ease; 
 
    -moz-transition: all .5s ease; 
 
    -ms-transition: all .5s ease; 
 
    -o-transition: all .5s ease; 
 
    transition: all .5s ease; 
 
} 
 

 
.m01 { 
 
    text-align: left; 
 
    right: 0; 
 
    width: 16px; 
 
} 
 

 
.m01:before { 
 
    content: '•'; 
 
} 
 

 
.m02 { 
 
    left: 200px; 
 
    width: calc(100% - 26px); 
 
    opacity: 0; 
 
    text-align: right; 
 
} 
 

 
.ssb00_inWrap:hover .m02 { 
 
    left: 0px; 
 
    opacity: 1; 
 
} 
 

 
.ssb00 a { 
 
    color: #fff; 
 
} 
 

 
.ssb00 a:hover { 
 
    color: #6ccef5; 
 
} 
 

 
.active .m02 { 
 
    left: 0px; 
 
    opacity: 1; 
 
} 
 

 
.active a { 
 
    color: #1b75ba; 
 
} 
 

 
.ssb01 { 
 
    z-index: 100; 
 
    background: rgba(255, 255, 255, .9); 
 
    border-bottom: 1px solid #f0f0f0; 
 
    height: 100px; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.ssb01 .nav { 
 
    font-weight: bold; 
 
    width: 560px; 
 
    height: 30px; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 10px; 
 
    text-align: left; 
 
} 
 

 
.ssb01 a { 
 
    color: #1b75ba; 
 
    text-decoration: none; 
 
    margin: 0px 15px; 
 
} 
 

 
.ssb01 a:hover { 
 
    color: #6ccef5; 
 
} 
 

 
.ssb01 a:active { 
 
    color: #fff; 
 
} 
 

 
.ssb01__info { 
 
    position: absolute; 
 
    height: 45px; 
 
    padding: 14px 20px; 
 
    left: 110px; 
 
    top: 15px; 
 
    color: #666; 
 
    opacity: 1; 
 
} 
 

 
.trans { 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 

 
.parallax { 
 
    height: 100vh; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    -webkit-perspective: 300px; 
 
    perspective: 300px; 
 
} 
 

 
.parallax__group { 
 
    position: relative; 
 
    height: 100vh; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
} 
 

 
.parallax__layer { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
.parallax__layer--fore { 
 
    -webkit-transform: translateZ(90px) scale(.7); 
 
    transform: translateZ(90px) scale(.7); 
 
    z-index: 1; 
 
} 
 

 
.parallax__layer--base { 
 
    -webkit-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
    z-index: 4; 
 
} 
 

 
.parallax__layer--back { 
 
    -webkit-transform: translateZ(-300px) scale(2); 
 
    transform: translateZ(-300px) scale(2); 
 
    z-index: 3; 
 
} 
 

 
.parallax__layer--deep { 
 
    -webkit-transform: translateZ(-600px) scale(3); 
 
    transform: translateZ(-600px) scale(3); 
 
    z-index: 2; 
 
} 
 

 
.debug { 
 
    position: fixed; 
 
    top: 0; 
 
    left: .5em; 
 
    z-index: 999; 
 
    background: rgba(0, 0, 0, .85); 
 
    color: #fff; 
 
    padding: .5em; 
 
    border-radius: 0 0 5px 5px; 
 
} 
 

 
.debug-on .parallax__group { 
 
    -webkit-transform: translate3d(800px, 0, -800px) rotateY(30deg); 
 
    transform: translate3d(700px, 0, -800px) rotateY(30deg); 
 
} 
 

 
.debug-on .parallax__layer { 
 
    box-shadow: 0 0 0 2px #000; 
 
    opacity: 0.9; 
 
} 
 

 
.parallax__group { 
 
    -webkit-transition: -webkit-transform 0.5s; 
 
    transition: transform 0.5s; 
 
} 
 

 
.parallax { 
 
    font-size: 200%; 
 
} 
 

 
.title { 
 
    text-align: center; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
#Xabout { 
 
    z-index: 3; 
 
    /* slide under groups 1 and 3 */ 
 
} 
 

 
#Xabout .parallax__layer--back { 
 
    background: #6ba1ff; 
 
} 
 

 
#aboutGal { 
 
    z-index: 5; 
 
    /* slide over group 2 */ 
 
} 
 

 
#aboutGal .parallax__layer--base { 
 
    background: #c4daff; 
 
} 
 

 
#Xconcept { 
 
    z-index: 3; 
 
    /* slide under groups 1 and 3 */ 
 
} 
 

 
#Xconcept .parallax__layer--back { 
 
    background: #7ae570; 
 
} 
 

 
#conceptGal { 
 
    z-index: 4; 
 
    /* slide over group 2 and 4 */ 
 
} 
 

 
#conceptGal .parallax__layer--base { 
 
    background: #adffa5; 
 
} 
 

 
#Xbroadcast { 
 
    z-index: 2; 
 
    /* slide under group 3 and 5 */ 
 
} 
 

 
#Xbroadcast .parallax__layer--back { 
 
    background: #f0f760; 
 
} 
 

 
#broadcastGal { 
 
    z-index: 3; 
 
    /* slide over group 4 and 6 */ 
 
} 
 

 
#broadcastGal .parallax__layer--base { 
 
    background: #fcffbc; 
 
} 
 

 
#Xdigital { 
 
    z-index: 2; 
 
    /* slide under group 5 and 7 */ 
 
} 
 

 
#Xdigital .parallax__layer--back { 
 
    background: #42e2f4; 
 
} 
 

 
#digitalGal { 
 
    z-index: 3; 
 
    /* slide over group 7 */ 
 
} 
 

 
#digitalGal .parallax__layer--base { 
 
    background: #aaf6ff; 
 
} 
 

 
#Xdesign { 
 
    z-index: 2; 
 
    /* slide under group 5 and 7 */ 
 
} 
 

 
#Xdesign .parallax__layer--back { 
 
    background: #e59172; 
 
} 
 

 
#designGal { 
 
    z-index: 3; 
 
    /* slide over group 7 */ 
 
} 
 

 
#designGal .parallax__layer--base { 
 
    background: #ffe1d6; 
 
} 
 

 
#Xcontact { 
 
    z-index: 2; 
 
    /* slide under group 5 and 7 */ 
 
} 
 

 
#Xcontact .parallax__layer--back { 
 
    background: rgb(245, 235, 100); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div class="debug"> 
 
    <label><input type="checkbox"> Debug</label> 
 
    </div> 
 

 
    <div id="menLogo"></div> 
 
    <div class="ssb01 trans"> 
 
    <div class="ssb01__info"> 
 
     <span>bill o'day</span> 
 
     <br /> 
 
     <span>creative director | art</span> 
 
    </div> 
 
    <div class="nav"> 
 
     <a href="#about">About</a> 
 
     <a href="#concept">Concept</a> 
 
     <a href="#broadcast">Broadcast</a> 
 
     <a href="#digital">Digital</a> 
 
     <a href="#design">Design</a> 
 
     <a href="#contact">Contact</a> 
 
    </div> 
 
    </div> 
 

 
    <div class="ssb00 trans"> 
 
    <div class="ssb00_inWrap"> 
 
     <div class="m00 men-1 active"> 
 
     <a href="#about"> 
 
      <div class="m01 mm-1"></div> 
 
      <div class="m02 mm-1">About</div> 
 
     </a> 
 
     </div> 
 
     <div class="m00 men-2 active"> 
 
     <a href="#concept"> 
 
      <div class="m01 mm-2"></div> 
 
      <div class="m02 mm-2">Concept</div> 
 
     </a> 
 
     </div> 
 
     <div class="m00 men-3 active"> 
 
     <a href="#broadcast"> 
 
      <div class="m01 mm-3"></div> 
 
      <div class="m02 mm-3">Broadcast</div> 
 
     </a> 
 
     </div> 
 
     <div class="m00 men-4 active"> 
 
     <a href="#digital"> 
 
      <div class="m01 mm-4"></div> 
 
      <div class="m02 mm-4">Digital</div> 
 
     </a> 
 
     </div> 
 
     <div class="m00 men-5 active"> 
 
     <a href="#design"> 
 
      <div class="m01 mm-5"></div> 
 
      <div class="m02 mm-5">Design</div> 
 
     </a> 
 
     </div> 
 
     <div class="m00 men-6 active"> 
 
     <a href="#contact"> 
 
      <div class="m01 mm-6"></div> 
 
      <div class="m02 mm-6">Contact</div> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 

 
    <div class="parallax"> 
 
    <div id="Xabout" class="parallax__group"> 
 
     <div id="about" class="parallax__layer parallax__layer--base"> 
 
     <div class="title">hello</div> 
 
     </div> 
 
     <div class="parallax__layer parallax__layer--back"> 
 
     <div class="title">ABOUT BG</div> 
 
     </div> 
 
    </div> 
 

 
    <div id="aboutGal" class="parallax__group"> 
 
     <div class="parallax__layer parallax__layer--base"> 
 
     <div class="title">ABOUT GAL</div> 
 
     </div> 
 
    </div> 
 

 

 
    <div id="Xconcept" class="parallax__group"> 
 
     <div id="concept" class="parallax__layer parallax__layer--base"> 
 
     <div class="title">concepts</div> 
 
     </div> 
 
     <div class="parallax__layer parallax__layer--back"> 
 
     <div class="title">Concepts BG</div> 
 
     </div> 
 
    </div> 
 
    <div id="conceptGal" class="parallax__group"> 
 
     <div class="parallax__layer parallax__layer--base"> 
 
     <div class="title">CONCEPTS GAL</div> 
 
     </div> 
 
    </div> 
 

 

 
    <div id="Xbroadcast" class="parallax__group"> 
 
     <div id="broadcast" class="parallax__layer parallax__layer--base"> 
 
     <div class="title">broadcast</div> 
 
     </div> 
 
     <div class="parallax__layer parallax__layer--back"> 
 
     <div class="title">BROADCAST BG</div> 
 
     </div> 
 
    </div> 
 
    <div id="broadcastGal" class="parallax__group"> 
 
     <div class="parallax__layer parallax__layer--base"> 
 
     <div class="title">BROADCAST GAL</div> 
 
     </div> 
 
    </div> 
 

 

 
    <div id="Xdigital" class="parallax__group"> 
 
     <div id="digital" class="parallax__layer parallax__layer--base"> 
 
     <div class="title">digital</div> 
 
     </div> 
 
     <div class="parallax__layer parallax__layer--back"> 
 
     <div class="title">DIGITAL BG</div> 
 
     </div> 
 
    </div> 
 
    <div id="digitalGal" class="parallax__group"> 
 
     <div class="parallax__layer parallax__layer--base"> 
 
     <div class="title">DIGITAL GAL</div> 
 
     </div> 
 
    </div> 
 

 
    <div id="Xdesign" class="parallax__group"> 
 
     <div id="design" class="parallax__layer parallax__layer--base"> 
 
     <div class="title">design</div> 
 
     </div> 
 
     <div class="parallax__layer parallax__layer--back"> 
 
     <div class="title">DESIGN BG</div> 
 
     </div> 
 
    </div> 
 
    <div id="designGal" class="parallax__group"> 
 
     <div class="parallax__layer parallax__layer--base"> 
 
     <div class="title">DESIGN GAL</div> 
 
     </div> 
 
    </div> 
 

 
    <div id="Xcontact" class="parallax__group"> 
 
     <div id="contact" class="parallax__layer parallax__layer--base"> 
 
     <div class="title">contact</div> 
 
     </div> 
 
     <div class="parallax__layer parallax__layer--back"> 
 
     <div class="title">CONTACT BG</div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 

 
</body> 
 

 
</html>