Не могу добраться до второй страницы с помощью Bootstrap (One Pager Landing Page)

Question

По какой-то причине я не вижу вторую страницу? Пожалуйста помоги. Мой код здесь: https://jsbin.com/dapowipize/edit?html,css,js,output

Это предварительный просмотр https://output.jsbin.com/dapowipize Если вы увеличите, вы увидите текст «Привет», но по какой-то причине, я не могу прокрутить вниз к нему ...

Пожалуйста, помогите ! :(

Большое спасибо

Kenny

Answer 1

Это в настоящее время код:

<div class="navbar navbar-default navbar-fixed-top"> 
/*everything else*/ 

Просто закройте div после вашего первого контейнера div, затем вы можете добраться до своего привет.

<div class="navbar navbar-default navbar-fixed-top"> 
    /*First container*/ 
    <div class="container"> 
     <div class="navbar-header"> 
      /*Code that goes inside this div*/ 
     </div> 
    </div> 
</div> 
<div class="container"> 
/*Rest of your code*/ 

Причина этого заключается в том, что с вашим DIV открыть это делает остальная часть страницы будет частью нав, а так как нав фиксируется в верхней части, нет никакого способа идти вниз, чтобы увидеть остальной части страницы. Позвольте мне знать, если это помогает.

Answer 2

Ваш JavaScript ограничивает мнение страницы на высоту окна:

var screenHeight = $(window).height(); 

Try играл вокруг с высоты окна просмотра в вашем CSS, вместо этого.

JS Fiddle: https://jsfiddle.net/ufowjgb7/

CSS:

.site-wrapper { 
    position: relative; 
    margin-top: 60px; 
} 

.navbar { 
    position: aboslute; 
    top: 0; 
    width: 100%; 
    height: 60px; 
    background-color: #ff0000; 
    color: #fff; 
} 

.welcome { 
    width: 100%; 
    height: 100vh; 
    background-color: #d0d0d0; 
} 

.cover-page1 { 
    width: 100%; 
    height: 100vh; 
    background-color: #00ff00; 
    color: #fff; 
} 

.cover-page2 { 
    width: 100%; 
    height: 100vh; 
    background-color: #0000ff; 
    color: #fff; 
} 

HTML:

<div class="navbar"> 
    Navbar 
</div> 

<div class="welcome"> 
    Welcome area 
</div> 

<div class="cover-page1"> 
    Your first cover area 
</div> 

<div class="cover-page2"> 
    Your next cover area 
</div>