Я работаю над домашней страницей с несколькими разделами.

<div id="section1">
    <!-- This needs to be the full height of the screen -->
</div>
<div id="section2">

</div>
<div id="section3">

</div>

Я хотел бы section1быть на всю высоту экрана, а затем пользователь может прокрутить вниз, чтобы увидеть section2и section3- можно ли это сделать только с помощью CSS или мне понадобится JS для динамической установки?

отвечать

Вы можете использовать единицы просмотра

CSS

#section1{
    display: block;
    background: #000;
    width: 100vw;
    height: 100vh;
}

ДЕМО ЗДЕСЬ

Здесь не нужен JavaScript. С помощью простого css вы можете сделать это легко:

#section1{
    width:100%;
    height:100%;
    display:block; // or inline-block - Optional
}

Возможно, вам также придется установить теги body& , но не всегда.htmlheight:100%

Вы можете попробовать так-

    html, body{height: 100%;}
    #section1{background: red;min-height:100%;}
<div id="section1">
   s <!-- This needs to be the full height of the screen -->
</div>
<div id="section2">

</div>
<div id="section3">

</div>
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

Отсюда _