Как можно реализовать по секторную прокрутку сайта при скролинге мышью?

Question

[snake_jan]

Есть Wordpress, в шапке стоит слайдер. Хотим сделать посекторный переход под слайд при прокрутке мышью.
Скажите как реализовать, желательно плагин? Пример того что я ищу : tashir.ru

Answer 1

[Роман Дворянов]

Fullsite.js

Comments

[snake_jan]

как применить на Wordpress повсеместно с Revolution slider? Нужно что бы при прокрутке сразу прокручивалось под слайдер

[Роман Дворянов]

snake_jan: Вам нужно по секторам прокручивать сайт или под слайдер?
- Если по секторам, то сайт разделится ровно на сектора размером в экран пользователя и при каждой прокрутке будет прокручиваться до следующего раздела, а вся информация что не поместится, будет обрезана свойством overflow: hidden; Для этого нужно в коде вашей темы Wordpress каждому сектору присвоить класс "section" и id="section1", id="section2" и т.п.
- Либо вам нужна простая прокрутка под слайдер без разделений сайта на секторы, тогда вам подойдет jquery скрипт, что-то вроде -

$('body, html').scroll(function () { // при прокрутке делаем дела
var topOfSite = $(document).scrollTop(); // Узнаем на каком уровне прокручен сайт

//Точка, к которой нужно докатиться, например
var destination = $('ID_ТОЙ_СЕКЦИИ_К_КОТОРОЙ_НУЖНО_ПРОКРУТИТЬ').offset().top;
//например var destination = $('#target').offset().top; то это < div id="target" >

if (topOfSite < destination ) { // Если высота скролла меньше, чем наша точка
$('html,body').animate( { scrollTop: destination }, 500 ); // прокручиваем к нужной точке
}
});

[snake_jan]

Спасибо огромное! Не могли бы вы пальцем ткнуть как подключить это к Wordpress? Буду очень признателен

[snake_jan]

Необходимо просто прокручивать под слайд, слайдер - slider revolution

[Роман Дворянов]

snake_jan: ну вам нужно отредактировать (подставить актуальные для вашего случая идентификаторы) и добавить к себе на сайт в код, ниже, чем у вас идет ссылка на библиотеку jquery

[snake_jan]

Все равно ничего не понял, ничего конкретного :( за 2е суток поисков пока ничего не получилось применить :( я не так силен в синтаксиса php и jquery, поэтому не могу понять что сделать :(

[Роман Дворянов]

snake_jan: как-то так codepen.io/irodger/pen/mPMLVg
готового решения вы не найдете, без погружения в код не обойтись, в любом случае нужно понимать что и к чему отматывать