#javascript #html #jquery #css
#javascript #HTML #jquery #css
Вопрос:
У меня есть функция, которая уменьшает ширину slider-side-hr
до 0 при прокрутке от верхней части страницы до -600 scrolling div
высоты (что означает до достижения нижней части scrolling div
).
Обе стороны ползунка фиксированы, одна справа, а другая слева.
<div class="tower" id="tower2">
<div class="scroll-slider-hr">
<div class="slider-side-hr slider-side1"></div>
<div class="slider-side-hr slider-side2"></div>
</div>
</div>
Он работает отлично, и ширина обоих slider-side-hr
уменьшается до 0 при прокрутке, но у меня проблема, когда scrolling div
он НЕ находится в верхней части страницы.
Мне нужно условие, которое выполняет функцию ТОЛЬКО тогда, когда ( scrolling div
) достигает нижней части страницы 100px
, что означает, что сначала я вижу slider-side-hr
всю ширину (с 100px
scrolling div
height
помощью ), затем она начинает уменьшаться до 0 при прокрутке, и она должна уменьшаться до 0 при достижении половины страницы scrolling div
var $scrollingDiv = $("#tower2");
$(window).scroll(function() {
var winScrollTop = ($(document).scrollTop() 0);
var zeroSizeHeight = $scrollingDiv.height() - 600;
var newSize = 250 * (1 - (winScrollTop / zeroSizeHeight));
$('.slider-side-hr').css({
width: newSize,
}, 500, 'easeInOutSine');
});
.container-full {
width: 100%;
margin-right: auto;
margin-left: auto;
}
.tower {
position: relative;
}
#tower1 {
/*margin-bottom: 700px*/
}
#tower2 {
background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5));
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 140vh;
background-attachment: fixed;
position: relative;
overflow: hidden;
}
.slider-side-hr {
position: absolute;
top: 0;
bottom: 0;
width: 250px;
height: 100%;
background: #ddd;
}
.slider-side1 {
left: 0;
}
.slider-side2 {
right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<dic class="container-full">
<div class="tower" id="tower1">
</div>
<div class="tower" id="tower2">
<div class="scroll-slider-hr">
<div class="slider-side-hr slider-side1"></div>
<div class="slider-side-hr slider-side2"></div>
</div>
</div>
</div>
Ответ №1:
Как работает этот код:
JS
Берет информацию о местоположении сверху #tower2
и присваивает ее переменной ftop
Из ftop
мы вычитаем значение прокрутки. Когда это значение становится меньше 0, начинается передача нового значения .slider-side-hr
в.
Начальное значение ширины .slider-side-hr
устанавливается равным 50% от ширины #tower2
Если вы хотите изменить скорость «анимации»… измените эту строку:
var newSize = zeroSizeWidth scl;
для этого var newSize = zeroSizeWidth scl * 2;
(Если вы хотите, чтобы анимация была адаптивной для настольных и мобильных устройств, вы можете задать значение * 2
в процентах от ширины экрана)
CSS
Внесенное изменение имеет значение класса .slider-side-hr
width: 100%;
Надеюсь, я был полезен
var $scrollingDiv = $("#tower2");
var ftop = $scrollingDiv.offset().top;
var zeroSizeHeight = $scrollingDiv.height();
var zeroSizeWidth = $scrollingDiv.width() / 2;
$(window).scroll(function () {
var winScrollTop = $(window).scrollTop();
var scl = ftop - winScrollTop;
if (scl < 0) {
var newSize = zeroSizeWidth scl * 2;
} else {
var newSize = zeroSizeWidth;
}
$('.slider-side-hr').css({
width: newSize,
}, 500, 'easeInOutSine');
});
.container-full {
width: 100%;
margin-right: auto;
margin-left: auto;
}
.tower {
position: relative;
}
#tower1 {
/*margin-bottom: 700px*/
}
#tower2 {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 140vh;
background-attachment: fixed;
position: relative;
overflow: hidden;
}
.slider-side-hr {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background: #ddd;
}
.slider-side1 {
left: 0;
}
.slider-side2 {
right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container-full">
<div class="tower" id="tower1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui
impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure assumenda ab?
Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat
possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure
assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga
amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque
in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam
fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam
itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus
ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto
doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita
architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium
expedita architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit.
</div>
<div class="tower" id="tower2">
<div class="scroll-slider-hr">
<div class="slider-side-hr slider-side1"></div>
<div class="slider-side-hr slider-side2"></div>
</div>
</div>
</div>
Комментарии:
1. Большое вам спасибо! Точно, с небольшими изменениями:
var ftop = $scrollingDiv.offset().top - (window.screen.height / 2);
var zeroSizeWidth = 250;
width: zeroSizeWidth "px",
2. Я рад, что смог вам помочь 🙂