Мне нужно прибить синий блок к потолку, но из за того, что content имеет свойство transform, fixed(синий блок) начинает отображаться от самой высокой точки сайта, а не от потолка браузера. Как это можно исправить?
gsap.registerPlugin(ScrollTrigger);
smoothScroll("#content");
const horizontalSections = gsap.utils.toArray('.horizontal')
horizontalSections.forEach(function (sec, i) {
var thisPinWrap = sec.querySelector('.pin-wrap');
var thisAnimWrap = thisPinWrap.querySelector('.animation-wrap');
var getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth);
gsap.fromTo(thisAnimWrap, {
x: () => thisAnimWrap.classList.contains('to-right') ? 0 : getToValue()
}, {
x: () => thisAnimWrap.classList.contains('to-right') ? getToValue() : 0,
ease: "none",
scrollTrigger: {
trigger: sec,
start: "top top",
end: () => "+=" + (thisAnimWrap.scrollWidth - window.innerWidth),
pin: true,
invalidateOnRefresh: true,
scrub: true,
}
});
});
function smoothScroll(content, viewport, smoothness) {
content = gsap.utils.toArray(content)[0];
smoothness = smoothness || 1;
gsap.set(viewport || content.parentNode, {overflow: "hidden", position: "fixed", height: "100%", width: "100%", top: 0, left: 0, right: 0, bottom: 0});
gsap.set(content, {overflow: "visible", width: "100%"});
let getProp = gsap.getProperty(content),
setProp = gsap.quickSetter(content, "y", "px"),
setScroll = ScrollTrigger.getScrollFunc(window),
removeScroll = () => content.style.overflow = "visible",
killScrub = trigger => {
let scrub = trigger.getTween ? trigger.getTween() : gsap.getTweensOf(trigger.animation)[0];
scrub && scrub.kill();
trigger.animation.progress(trigger.progress);
},
height, isProxyScrolling;
function refreshHeight() {
height = content.clientHeight;
content.style.overflow = "visible"
document.body.style.height = height + "px";
return height - document.documentElement.clientHeight;
}
ScrollTrigger.addEventListener("refresh", () => {
removeScroll();
requestAnimationFrame(removeScroll);
})
ScrollTrigger.defaults({scroller: content});
ScrollTrigger.prototype.update = p => p;
ScrollTrigger.scrollerProxy(content, {
scrollTop(value) {
if (arguments.length) {
isProxyScrolling = true;
setProp(-value);
setScroll(value);
return;
}
return -getProp("y");
},
getBoundingClientRect() {
return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
}
});
return ScrollTrigger.create({
animation: gsap.fromTo(content, {y:0}, {
y: () => document.documentElement.clientHeight - height,
ease: "none",
onUpdate: ScrollTrigger.update
}),
scroller: window,
invalidateOnRefresh: true,
start: 0,
end: refreshHeight,
refreshPriority: -999,
scrub: smoothness,
onUpdate: self => {
if (isProxyScrolling) {
killScrub(self);
isProxyScrolling = false;
}
},
onRefresh: killScrub
});
}
$(document).ready(function(){
var $menu = $("#catsecmenu");
$(window).scroll(function(){
if ( $(this).scrollTop() > 100 && $menu.hasClass("defaulttm") ){
$menu.removeClass("defaulttm").addClass("catsecmenufx");
} else if($(this).scrollTop() <= 100 && $menu.hasClass("catsecmenufx")) {
$menu.removeClass("catsecmenufx").addClass("defaulttm");
}
});
});
/* devanagari */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body {
margin: 0;
}
.header {
height: 100px;
background: #000
}
.videobanner {
height: 619px;
background: #ccc
}
.section2 {
height: 500px;
background: #333
}
.section3 {
height: 500px;
background: #e1e1e1
}
.section4 {
height: 400px;
background: #000
}
.catsecmenu {
height: 55px;
background: #006699;
width: 100%;
z-index: 9999;
}
.catsecmenufx {
position: fixed;
width: 100%;
height: 55px;
top: 0;
left: 0;
}
.catgorieswr {
background: #F5F5F7;
max-width: 1920px !important;
margin: auto;
overflow: hidden;
height: 100vh;
width: 100% !important;
}
.catgorieswrm {
display: flex;
position: relative;
z-index: 1;
}
.catgorieswr_1 {
min-width: 400px;
width: 100%;
margin: 100px 0 20px 40px
}
.catgorieswr_1_1 {
color: #203860;
font-family: Poppins;
font-size: 42px;
font-weight: bold;
line-height: 45px
}
.catgorieswr_1_2 {
color: #2C2F34;
font-family: Poppins;
font-size: 18px;
margin-top: 20px
}
.catgorieswr_2 {
display: flex;
margin: 100px 0 20px 40px
}
.catgorieswr_2 div {
width: 350px;
min-height: 450px;
padding: 30px;
margin: 0 15px;
background: #fff;
border-radius: 10px;
text-align: center;
font-family: Poppins;
font-size: 18px;
-webkit-box-shadow: 0px 0px 8px 0px rgba(150, 158, 164, 0.2);
moz-box-shadow: 0px 0px 8px 0px rgba(150, 158, 164, 0.2);
box-shadow: 0px 0px 8px 0px rgba(150, 158, 164, 0.2);
}
.catgorieswr_2 div img {
max-width: 330px;
margin: 30px 0 80px
}
.catgorieswr_3 {
margin: 10px 0 100px 495px
}
.catgorieswr_3 a {
color: #F7971D;
font-family: Poppins;
font-size: 16px;
text-decoration: none;
}
.catgorieswr_3 a:hover {
text-decoration: underline
}
.pin-spacer {
width: 100% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll</title>
<link href="css/css.css" rel="stylesheet">
</head>
<body>
<div id="viewport">
<div id="content">
<div>
<div class="catsecmenuwr"></div>
<div class="header"></div>
<div class="catsecmenu defaulttm" id="catsecmenu"></div>
<div class="videobanner"></div>
<div class="catgorieswr horizontal">
<div class="pin-wrap">
<div class="catgorieswrm animation-wrap to-right">
<div class="catgorieswr_1">
<div class="catgorieswr_1_1">
Live Streaming Solutions
</div>
<div class="catgorieswr_1_2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
</div>
</div>
<div class="catgorieswr_2">
<div>
<img alt="" src="./img/BG-NUCLEUS-10X_972_876.png"><br>
Cameras
</div>
<div>
<img alt="" src="./img/BG-NUCLEUS-10X_972_876.png"><br>
Cameras
</div>
<div>
<img alt="" src="./img/BG-NUCLEUS-10X_972_876.png"><br>
Cameras
</div>
<div>
<img alt="" src="./img/BG-NUCLEUS-10X_972_876.png"><br>
Cameras
</div>
</div>
</div>
<div class="catgorieswr_3">
<a href="https://test.bzbgear.com/homepagescroll.html">Cameras and Broadcasting Equipment></a> <a href="https://test.bzbgear.com/homepagescroll.html">Applications and Solutions></a>
</div>
</div>
</div>
<div class="catgorieswr horizontal">
<div class="pin-wrap">
<div class="catgorieswrm animation-wrap to-right">
<div class="catgorieswr_1">
<div class="catgorieswr_1_1">
Pro Audio Visual Solutions
</div>
<div class="catgorieswr_1_2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
</div>
</div>
<div class="catgorieswr_2">
<div>
<img alt="" src="img/BG-NUCLEUS-10X_972_876.png"><br>
Cameras
</div>
<div>
<img alt="" src="./img/BG-NUCLEUS-10X_972_876.png"><br>
Cameras
</div>
<div>
<img alt="" src="./img/BG-NUCLEUS-10X_972_876.png"><br>
Cameras
</div>
<div>
<img alt="" src="./img/BG-NUCLEUS-10X_972_876.png"><br>
Cameras
</div>
<div>
<img alt="" src="./img/BG-NUCLEUS-10X_972_876.png"><br>
Cameras
</div>
<div>
<img alt="" src="./img/BG-NUCLEUS-10X_972_876.png"><br>
Cameras
</div>
<div>
<img alt="" src="./img/BG-NUCLEUS-10X_972_876.png"><br>
Cameras
</div>
<div>
<img alt="" src="./img/BG-NUCLEUS-10X_972_876.png"><br>
Cameras
</div>
<div>
<img alt="" src="./img/BG-NUCLEUS-10X_972_876.png"><br>
Cameras
</div>
<div>
<img alt="" src="./img/BG-NUCLEUS-10X_972_876.png"><br>
Cameras
</div>
<div>
<img alt="" src="./img/BG-NUCLEUS-10X_972_876.png"><br>
Cameras
</div>
<div>
<img alt="" src="./img/BG-NUCLEUS-10X_972_876.png"><br>
Cameras
</div>
</div>
</div>
<div class="catgorieswr_3">
<a href="https://test.bzbgear.com/homepagescroll.html">Cameras and Broadcasting Equipment></a> <a href="https://test.bzbgear.com/homepagescroll.html">Applications and Solutions></a>
</div>
</div>
</div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>