Was könnte in meinem CSS der Fehler sein - Parallax/Sticky Header?

Kwerdi11 · 17.09.2019

Hallo,

ich habe mit meiner Parallaxe folgende Probleme.

Wenn ich im CSS-Teil:

HTML:

html {overflow: hidden;}

einstelle, geht mein Parallax-Effekt wunderbar, aber der Sticky-Header haut nicht mehr hin. Das head-menu verschwindet dann oben und ist weg.

Wenn ich im CSS-Teil overflow: hidden für html weglasse, dann geht das Menu in Verbindung mit dem JavaScript wunderbar, aber der Parallax-Effekt geht nicht mehr.

Kann jemand sagen, woran es liegt? Mein Ziel wäre einfach nur ein Parallax-Effekt in Verbindung mit einem Sticky Header der in JavaScript auf Scrollen reagieren soll.

CSS

HTML:

html {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}
body {
  margin: 0;
  perspective: 1px;
  transform-style: preserve-3d;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax-part {
    width: 100vw;
    height:100vh;
    transform-style: preserve-3d;
}
.parallax-part::before {
    content:"";
    width: 100vw;
    height: 100vh;
    top:0;
    left:0;
    background-image: url("img/background.jpg");
    background-size: cover;
    position: absolute;
    z-index: -1;
    transform: translateZ(-1px) scale(2);
}
.head-menu {
	  margin: 0 auto;
	  width: 70%;
	  height: 0px;
	  background-color: rgba(0,0,0,.0);
	  position: relative;
	  position: sticky;
	  top: 0;
	  z-index: 10;
	  transition: all 0.3s ease-in-out;
      ...
	}
.regular-wrapper {
	width: 100vw;
    height: 100vh;
    padding-top: 10vh;
    background-image: url("img/background01.jpg");
    z-index: 2;
    position: relative;
}
body.sticky-header .head-menu  {
   height: 60px;
   background-color: rgba(0,0,0,.5);
   width: 100%;
   ...
   ...
}

HTML

HTML:

<body>
      <div class="parallax-part">
          <div class="head-menu">
          </div>
          ...
      </div> 
      <div class="regular-part">
          <div class="main">
          </div>
          ...
      </div>
</body>

JavaScript

HTML:

$(function(){
$(window).scroll(function(){
var winTop = $(window).scrollTop();
if(winTop >= 30){
 $("body").addClass("sticky-header");
}else{
 $("body").removeClass("sticky-header");
}
});
});

Paloby · 01.10.2019

Hi Kwerdi11,

ich weiß nicht was genau du für einen parallax effekt haben möchtest, ich habe deinen Code nochmal etwas umgeschrieben und mit background-attachment: fixed; gearbeitet.

Allgemein würde ich nie im html-Tag ein overflow: hidden platzieren, hier sollte der body-Tag reichen.

Hier der CSS Code:

Code:

    html {
        margin: 0;
        padding: 0;
        vertical-align: baseline;
    }
    body {
        margin: 0;
        perspective: 1px;
        transform-style: preserve-3d;
        overflow-x:hidden;

    }
    .parallax-part {
        width: 100vw;
        height: 100vh;
        transform-style: preserve-3d;
    }
    .parallax-part::before {
        content:"";
        width: 100vw;
        height: 100vh;
        top:0;
        left:0;
        bottom: 0;
        right: 0;
        background: url("img/background.jpg") no-repeat;
        background-attachment: fixed;
        background-size: cover;
        position: absolute;
        z-index: -1;
    }
    .head-menu {
      margin: 0 auto;
      width: 70%;
      height: 0px;
      background-color: rgba(0,0,0,.0);
      position: sticky;
      top: 0;
      z-index: 10;
      transition: all 0.3s ease-in-out;
    }
    .regular-part {
        width: 100vw;
        height: 100vh;
        padding-top: 10vh;
        background-image: url("img/background01.jpg");
        z-index: 2;
        position: relative;
    }
    body.sticky-header .head-menu  {
       height: 60px;
       background-color: rgba(0,0,0,.5);
       width: 100%;
    }

Schau mal ob dir das so schon reicht.