Auf Thema antworten

Beitrag

[QUOTE="Kwerdi11, post: 8242, member: 1716"]
Hallo,

ich habe mit meiner Parallaxe folgende Probleme.

Wenn ich im CSS-Teil:

[HTML]html {overflow: hidden;}[/HTML]

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.

[B]CSS[/B]

[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]

[B]HTML[/B]

[HTML]<body>
      <div class="parallax-part">
          <div class="head-menu">
          </div>
          ...
      </div> 
      <div class="regular-part">
          <div class="main">
          </div>
          ...
      </div>
</body>
[/HTML]
[B]JavaScript[/B]

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

Authentifizierung