jQuery Fenster .Scroll Dysfunktion

Ich bin der gesamte Code hier, es ist die Knochen einer Parallax-Website (alle CSS) mit einem Bildlaufmenü (jQuery), die die aktuelle Position basierend auf div ID anzeigt.jQuery Fenster .Scroll Dysfunktion

Die parallax CSS und Menü jQuery funktionieren einwandfrei getrennt, aber es gibt eine Dysfunktion in Kombination.

Ich habe es auf die window.scroll eingegrenzt, indem ich es in der Konsole protokolliert habe und sehe, dass immer, wenn der Mauszeiger beim Scrollen über den Hauptinhaltsrahmen (.parallax) schwebt, nichts protokolliert wird. Gibt es eine Möglichkeit, sicherzustellen, dass die Fensterattribute und die Bildlaufposition protokolliert werden, unabhängig davon, was sich im Hauptbereich befindet?

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>

EDIT:

ich meine JS geändert haben .scroll auf dem .parallax div konzentrieren Befehle, da das wirklich ist, was gemessen werden soll, und es meldet sich jetzt nur noch in Ordnung. ABER das Klicken auf die Elemente im Seitenmenü scrollt immer noch zu Positionen, als ob es eine 30% Sicht auf das Ganze hat.

Also ich denke, das Problem ist jetzt vor allem mit dieser Zeile:

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

Die scrollTop und offsetTop Ergebnisse scheinen weg zu sein. Ich versuche es herauszufinden, aber ich bin sehr langsam. Jede Hilfe wäre willkommen.

Quelle

2017-05-31 Joel

Also, müssen Sie hören .parallax Scrollen nach rechts?
Und du hast das nicht versucht?

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

in Ihrem Skript habe ich die mehr ready Wrapper befreien.

$(document).ready(function() { ist die gleiche wie $(function() {
One eine kurze Hand des anderen ist.
Mehrere nachfolgende Wrapper wie diese sind nutzlos ... Und verschachtelte auch.

Ich habe auch diese ( Und das ist, was Ihre Seite im Menü auf scroll back up Offset fixiert):

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

ich auch die Seite Menü Links festen Handler klicken wie folgt aus:

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(); 
});

Es gibt immer noch einen kleinen Fehler in der Darstellung der Menüs (oben und Seite) ...
Das liegt daran, dass Sie opacity anstelle von display verwenden, um show/hide zu steuern.
Das ist auch die Quelle der weißen Band am unteren Rand der Seite.

verließ ich für Sie einige Arbeit;)

es Siehe auf CodePen und auf dem folgenden Code-Schnipsel (aber auf den „Ganze Seite“ Link).

$(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>

Quelle

2017-06-02 18:10:57

Vielen Dank - ich dies zurück, weil meine Spaghetti-Version zu kommen, vergessen fein gearbeitet, aber es wird gut sein, es mit den Schleifen richtig zu machen. Ich wusste eigentlich nicht, dass $ (function() {das gleiche wie doc.ready war, so dumm das klingt ... Ich wünschte, ich wäre an die Universität gegangen, um statt Literatur Literatur zu schreiben -_- – Joel

jQuery Fenster .Scroll Dysfunktion

Antwort

Verwandte Themen