position: fixed;, положение его менять программно по событию "scroll".document.addEventListener('scroll', () => {
let offset = window.scrollY;
const start = 685; // начало стоп-зоны в px
const stop = 1000; // конеч стоп-зоны
if (offset >= start && offset < stop) {
offset = start; // стоим на месте
} else if (offset >= stop) {
offset -= (stop - start); // продолжаем движение
}
content.style.top = `-${offset}px`; // позиционируем контент
});
{
const transactions = [
{
date: '25.01.2015',
price: '28',
},
{
date: '22.02.2015',
price: '23',
},
{
date: '24.02.2015',
price: '12',
},
{
date: '02.03.2015',
price: '55',
},
{
date: '10.03.2015',
price: '56',
},
{
date: '15.03.2015',
price: '8',
},
{
date: '24.03.2015',
price: '19',
},
{
date: '26.03.2015',
price: '12',
},
{
date: '27.03.2015',
price: '11',
},
];
const firstMonthDate = 25;
const firstTransaction = transactions[0].date.split('.').map((n) => +n);
const increaseMonth = (date) => {
date.month = ((date.month + 12) % 12) + 1;
if (date.month === 1) {
date.year++;
}
};
const startDate =
firstTransaction[0] < firstMonthDate
? {
day: firstMonthDate,
month: ((firstTransaction[1] + 10) % 12) + 1,
year: firstTransaction[2] - (firstTransaction[1] === 1 ? 1 : 0),
}
: {
day: firstMonthDate,
month: firstTransaction[1],
year: firstTransaction[2],
};
const endDate = { ...startDate };
increaseMonth(endDate);
endDate.day--;
const sumByMonths = [
{
from: { ...startDate },
to: { ...endDate },
sum: 0,
},
];
let sumByMonthIndex = 0;
transactions.forEach((transaction) => {
const [day, month] = transaction.date.split('.').map((n) => +n);
if (
!(month === startDate.month && day >= startDate.day) &&
!(month === endDate.month && day <= endDate.day)
) {
increaseMonth(startDate);
increaseMonth(endDate);
sumByMonths.push({
from: { ...startDate },
to: { ...endDate },
sum: 0,
});
sumByMonthIndex++;
}
sumByMonths[sumByMonthIndex].sum += +transaction.price;
});
console.log('>>> sumByMonths', sumByMonths);
}{
const transactions = [
{
date: '25.01.2015',
price: '28',
},
{
date: '22.02.2015',
price: '23',
},
{
date: '24.02.2015',
price: '12',
},
{
date: '02.03.2015',
price: '55',
},
{
date: '10.03.2015',
price: '56',
},
{
date: '15.03.2015',
price: '8',
},
{
date: '24.03.2015',
price: '19',
},
{
date: '26.03.2015',
price: '12',
},
{
date: '27.03.2015',
price: '11',
},
];
const firstMonthDate = 25;
const firstTransaction = transactions[0].date.split('.').map((n) => +n);
const increaseMonth = (date) => {
date.month = ((date.month + 12) % 12) + 1;
if (date.month === 1) {
date.year++;
}
};
const dateToString = (date) => `${date.year}-${date.month}-${date.day}`;
const startDate =
firstTransaction[0] < firstMonthDate
? {
day: firstMonthDate,
month: ((firstTransaction[1] + 10) % 12) + 1,
year: firstTransaction[2] - (firstTransaction[1] === 1 ? 1 : 0),
unix: 0,
}
: {
day: firstMonthDate,
month: firstTransaction[1],
year: firstTransaction[2],
unix: 0,
};
startDate.unix = +new Date(dateToString(startDate));
const endDate = { ...startDate };
increaseMonth(endDate);
endDate.unix = +new Date(dateToString(endDate)) - 1;
const sumByMonths = [
{
from: {
day: startDate.day,
month: startDate.month,
year: startDate.year,
},
to: { day: endDate.day - 1, month: endDate.month, year: endDate.year },
sum: 0,
},
];
let sumByMonthIndex = 0;
transactions.forEach((transaction) => {
const date = +new Date(transaction.date.split('.').reverse().join('-'));
if (!(date >= startDate.unix && date <= endDate.unix)) {
increaseMonth(startDate);
startDate.unix = +new Date(dateToString(startDate));
increaseMonth(endDate);
endDate.unix = +new Date(dateToString(endDate)) - 1;
sumByMonths.push({
from: {
day: startDate.day,
month: startDate.month,
year: startDate.year,
},
to: { day: endDate.day - 1, month: endDate.month, year: endDate.year },
sum: 0,
});
sumByMonthIndex++;
}
sumByMonths[sumByMonthIndex].sum += +transaction.price;
});
console.log('>>> sumByMonths', sumByMonths);
}const filteredArray = transactions.filter((item) => {
const dataTokens = item.date.split('.');
const date = new Date(+dataTokens[2], +dataTokens[1] - 1, +dataTokens[0]);
return date.getDate() >= 24 && date.getDate() <= 25;
});
console.log(filteredArray);let currentMonth = 0;
let isFirstRun = true;
let bufferSumInMonth = 0;
const pricesArray = [];
for (let i = 0; i < transactions.length; i++) {
const currentItem = transactions[i];
const dataTokens = currentItem.date.split('.');
const date = new Date(+dataTokens[2], +dataTokens[1] - 1, +dataTokens[0]);
if (isFirstRun) { currentMonth = date.getMonth(); isFirstRun = false; }
if (currentMonth === date.getMonth() && (date.getDate() >= 24 && date.getDate() <= 25)) {
bufferSumInMonth += parseInt(currentItem.price, 10);
} else if (currentMonth !== date.getMonth() || i === transactions.length - 1) {
console.log(bufferSumInMonth);
pricesArray.push({ sum: bufferSumInMonth, month: date.getMonth() });
bufferSumInMonth = 0;
}
currentMonth = date.getMonth();
}
console.log(pricesArray);
overflow: overlay для html или body это заставит скролл быть поверх страницы (не занимать место), работает не во всех браузерах.Раньше решал эту проблему выставляя body width: 100vw; Но при таком подходе если высота страницы больше чем высота окна - появляется горизонтальный скролл в хроме, так и не понял откуда он появляется.
calc(100vw - 100%)
$(window).scroll(function(){
$('.main-nav-wrap').toggleClass('header-has-background', $(this).scrollTop() > 0);
});
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
gulp.task('sass', function(done) {
gulp.src("scr/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("scr/css"))
.pipe(browserSync.stream());
done();
});
gulp.task('serve', function(done) {
browserSync.init({
server: "src/"
});
gulp.watch("scr/sass/*.sass", gulp.series('sass'));
gulp.watch("scr/*.html").on('change', () => {
browserSync.reload();
done();
});
done();
});
gulp.task('default', gulp.series('sass', 'serve'));