Реализация прокрутки на сайте

Я пытаюсь внедрить плагин jQuery Scrollify на свой сайт. Однако этот плагин предполагает, что моя структура сайта только с sections, но это не так. То, что я имею в виду, что структура сайта являетсяРеализация прокрутки на сайте

<body> 
<div class="mobilenav"> 
    .... 
</div> 
<header id="header"> 
    .... 
</div> 
    <section class="section section1"> Section 1 </section> 
    <section class="section section2"> Section 2 </section> 
    <section class="section section3"> Section 3 </section> 
    <section class="section section4"> Section 4 </section> 
    <section class="section section5"> Section 5 </section> 
<div class="footer"> 
    .... 
</div> 
</body>

Вот как я реализовать

$(function() { 
$(".section").css({"height":$(window).height()}); 
    $.scrollify({ 
    section:".section" 
    }); 


    $(".scroll").click(function(e) { 
    e.preventDefault(); 
    $.scrollify("move",$(this).attr("href")); 
    }); 
});

Так что проблема, когда сайт загружается и когда я прокручиваю это показывает только <section> .. он не показывает <header>, <footer> и все, что не завершено в классе разделов. Можно ли это избежать?

источник

2015-07-20 Jason Paddle

Если вы не посмотрели [fullPage.js] (http://alvarotrigo.com/fullPage/), я бы очень рекомендовал его вам. Гораздо больше вариантов и совместим со старыми браузерами и сенсорными устройствами. Также касается кинетической прокрутки и предоставления обновлений каждый месяц. И если вам нужна полоса прокрутки, просто используйте 'scrollBar: true' как [здесь] (http://www.alvarotrigo.com/fullPage/examples/scrollBar.html). – Alvaro

Я добавлю, что, имея свой собственный код для создания каждого раздела, высота страницы может конфликтовать с функцией Scrollifys, чтобы сделать то же самое. Поэтому я бы отключил setHeights – bazzlebrush

Если это работает на <section>, может быть трудно избежать этой ситуации.

Может просто обернуть <div> в <section> так:

<section> 
<div> 
</div> 
</section>

У вас будет все хорошо работает, а также вы можете управлять все варианты описаны here в разделе

секции

источник

2015-07-20 13:28:14 Direkts

Ну, я не знаю, почему я не думал просто обернуть этот div в тег

. Глупый я .. Спасибо, это трюк. –

Любая идея, почему 'scrollSpeed: 1100' не работает. Я видел это в разделе' Option', но не имеет значения, какое значение я положил, это не сработало? –

Возможно, 'scrollSpeed: 1100' не работает, потому что вам нужно определить' easing'? Я не знаю, его просто слепой стрелок :) – Direkts

Scrollify «Options» определены в инициализации Scrollify. Они определены пользователем, поэтому они могут быть любыми, что вы хотите.

$.scrollify({ 
    section:"this-is-a-css-selector" 
});

Что касается ваших верхних и нижних колонтитулов, вы можете использовать interstitialSection для них. Это сделает вашу инициализацию выглядеть следующим образом:

$.scrollify({ 
    section:".section", 
    interstitialSection:"#header,.footer" 
});

Таким образом Scrollify будет еще прокручивать к ним, но не будет манипулировать их высоту.

источник

2016-06-06 11:35:45

Реализация прокрутки на сайте

ответ

Смежные вопросы