Нижний колонтитул не отображается в конце слайда div

ProgramBox

Нижний колонтитул не отображается в конце слайда div

Post author:admin
Запись опубликована:27 августа, 2022
Post category:Вопросы по программированию

#jquery #html #css #fullpage.js

#jquery #HTML #css #fullpage.js

Вопрос:

Нижний колонтитул отсутствует после окончания разделения.

 <div id="fullpage">
  <div class="section " id="section0"> content1 </div>
  <div class="section " id="section0"> content1 </div>
  <div class="section " id="section0"> content1 </div>
  <div class="section " id="section0"> content1 </div>
</div>
<footer> this is my footer </footer>

и это мой сценарий

 <script type="text/javascript">
  $(document).ready(function() {    
     $('#fullpage').fullpage({
        verticalCentered: false,
        resize : true,
        easing: 'easeInQuart',
        navigation: true,
        navigationPosition: 'right',
        scrollOverflow: false,
     });    
  });
</script>

Я использую полную страницу, прокрутка js работает плавно, но нижний колонтитул не отображается.

1. Браузер? И какая версия? Это не будет работать, IE<9 и для вас информация id должна быть уникальной в valid HTML

2. Это работает, когда я скопировал ваш код внутри скрипки. Так что это могут быть некоторые проблемы с css

3. что будет делать плагин для полной страницы?

4. это плагин, который я использовал для функций прокрутки alvarotrigo.com/fullPage/#3rdPage

5. можете ли вы предоставить CSS для раздела class??

Ответ №1:

Это решение для нижнего колонтитула, которое вы пробовали, по умолчанию не поддерживается fullpage. Я сделал простое расширение к оригиналу fullpage.js , который поддерживает это.

             if (v.anchorLink == 'footer')
            {
                footer_a = $('#section-footer').height();
                footer_h = $('#footer-text').height();
                var translate3d = 'translate3d(0px, -'   (v.dtop - footer_a   footer_h)   'px, 0px)';
            }
            else
            {
                var translate3d = 'translate3d(0px, -'   v.dtop   'px, 0px)';
            }

Вы можете попробовать это: ссылка

Высота нижнего колонтитула рассчитывается по тексту в нем.

Ответ №2:

Ваша скрипка выглядит иначе, чем код, опубликованный в вашем исходном вопросе, однако ответ все равно должен быть применим.

Измените свой css с:

 #footer{
    bottom:0px;
}

Для:

 #footer{
    position: fixed;
    bottom:0;
}

http://jsfiddle.net/GUTBA/

РЕДАКТИРОВАТЬ — вышеизложенное исправит нижний колонтитул в нижней части страницы для всех разделов. Если требуется показать его после последнего слайда, вам нужно будет выполнить одно из следующих действий:

Если нижний колонтитул имеет фиксированную высоту, измените css на:

 #footer{
    bottom: 20px;
    height: 20px;
    position: relative;
}

http://jsfiddle.net/vU5hY/

Это приведет к смещению нижнего колонтитула вверх от его положения после слайда на величину, равную его высоте.

Если нижний колонтитул не имеет фиксированной высоты, измените css на:

 #footer{
    bottom: 0;
    position: absolute;
}
.section {
    position: relative;
    text-align: center;
}

Измените HTML на:

 <div class="section" id="section3">
    <div class="sectionContent">
        <h1>Section 3</h1>
    </div>
    <div id="footer">Footer</div>
</div>

http://jsfiddle.net/CKGQ5/

Переместите нижний колонтитул на последний слайд, установите контейнер как position: relative; так что, когда мы устанавливаем нижний колонтитул в position: absolute; он позиционируется относительно него.

1. извините за это, но это почти то же самое. в любом случае я не хочу, чтобы нижний колонтитул был исправлен. я видел какой-то сайт, который может добавлять нижний колонтитул после прокрутки 4 слайдов.

2. Итак, вы хотите, чтобы нижний колонтитул отображался только после последнего слайда, а не предшествующих ему?

3. Должно быть, может ли нижний колонтитул иметь заданную высоту?

4. Помогло ли какое-либо из предложенных решений?

Ответ №3:

Вы можете сделать это, если используете новую функцию fullpage.js 2.7.1. (секции автоматической высоты)

Проверьте это в документации

Здесь у вас есть пример онлайн. Прокрутите до последнего раздела.

Ответ №4:

У меня есть нефиксированный нижний колонтитул ЗА ПРЕДЕЛАМИ полностраничного div. Когда я попробовал приведенный выше код css для нижнего колонтитула с фиксированной высотой, это привело к появлению дополнительного пространства под нижним колонтитулом, равного высоте, установленной в атрибуте ‘bottom’ (в приведенном выше случае 20 пикселей).

Однако использование следующего кода не создает дополнительного пространства, и его можно использовать для нижнего колонтитула переменной высоты:

 .footer {
    padding: 30px 0;
    bottom: 75px;
    margin-bottom: -75px;
    position: relative;
}

Метки: Нижний колонтитул не отображается в конце слайда div