полноэкранный веб-сайт с небольшой прокруткой включен с задержкой/анимацией

Question

Я создал полноэкранный веб-сайт (высота и ширина 100%) с помощью бутстрапа и его функции jumbotron. Также добавлены 10px границы с телом обивка

HTML

<div class="row"> 
    <div class="jumbotron indx-BG" > 
    ... 
    </div> 
</div> 

Css

body { padding: 10px; } 

.indx-BG { 
background: url('...') no-repeat center center; 
background-size: cover; 
min-height: calc(100vh - 20px); 
width: 100%; 
} 

работает так, как я хочу. Однако я хочу добавить нижний колонтитул (неизвестная высота), который нельзя увидеть, если пользователь не прокрутит вниз. Я хочу видеть, чтобы оставаться отзывчивым и полноэкранным, если пользователь не захочет прокручивать, затем покажет небольшой дополнительный нижний колонтитул.

EDIT - Я хочу, чтобы быть немного задержки/анимации для свитка, аналогичны тем ползунков, которые «подтолкнуть» содержание вверх/вниз

Answer 1

надеюсь, что это поможет. Я добавил еще 2 раздела, чтобы вы могли видеть анимацию. Код обнаруживает свиток, который находится снизу вверх или сверху вниз. если он обнаруживает прокрутку вверх, он будет инициализировать анимацию прокрутки, и когда она обнаружит прокрутку вниз, она оживит прокрутку, идущую к нижнему колонтитулу.

var domouse = true; 
 
var content_down = $('footer').offset().top; 
 
var content_up = $('div').offset().top; 
 
$('body').on('mousewheel DOMMouseScroll', function(e) { 
 

 
    if (e.originalEvent.wheelDelta > 0) { 
 
    if (!domouse) 
 
    return; 
 
    domouse = false; 
 
    $('html, body').animate({ 
 
     scrollTop: content_up 
 
    }, 1000, function(){ 
 
     domouse = true; 
 
    }); 
 
    } else { 
 
    if (!domouse) 
 
    return; 
 
    domouse = false; 
 
    $('html, body').animate({ 
 
     scrollTop: content_down 
 
    }, 1000, function(){ 
 
     domouse = true; 
 
    }); 
 
    } 
 

 
});

div { 
 
    width: 100%; 
 
    height: 100vh; 
 
    text-align: center; 
 
    color: white; 
 
    font-size: 32px; 
 
    line-height: 100vh; 
 
    background-color: black; 
 
    background-size: cover; 
 
} 
 
footer { 
 
    padding: 15px 0 15px 0; 
 
    text-align: center; 
 
    color: black; 
 
    font-size: 20px; 
 
} 
 
body { 
 
    overflow: hidden; 
 
    margin: 0; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    main section 
 
</div> 
 
<footer> 
 
    this is a footer 
 
</footer>

Answer 2

Попробуйте высоту окна, это самый лучший способ:

//#main-slider 
var WindowHeight = $(window).height(); 
$('#demo').css('height',WindowHeight); 

$(window).resize(function(){'use strict', 
    $('#demo').css('height',WindowHeight); 
});