Форум

Sergey-web92 · #1 (**permalink**) 19.01.2021, 11:15

Здравствуйте. Помогите пожалуйста разобраться.
Мне нужно чтобы блок с классом ".header-laptop" прилипал к вверху страницы. при этом он должен сохранять прилипание выходя из своего родителя.

Для этого я прописал jQuery-код. В результате этого прилипание у header-laptop не работает.

Буду очень благодарен за помощь.

<body>
<header class="page-header">
    <!-- top-banner -->
    <section class="top-banner is-active">
        <span class="top-banner__description">some text</span>
    </section>
    <!-- header laptop -->
    <section class="header-laptop">
        <h1>Этот блок должен быть stiky</h1>
    </section>
</header>
<main></main>


<style>
.top-banner {
  height: 50px;
  position: relative;
  background-color: gray;
}

.header-laptop {
  background-color: yellowgreen;
  height: 80px;
  width: 100%;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

main {
  background-color: tan;
  width: 100%;
  height: 300px;
}

</style>
</body>

$(document).ready(function() {
    
    let stickyNavTop = $('.header-laptop').offset().top;
  
    $('.page-header').height($('.page-header').height());
  
    $(window).scroll(function(){
        if ($(window).scrollTop() >= stickyNavTop) {
            $('.header-laptop').addClass('fixed-header');
        } else {
            $('.header-laptop').removeClass('fixed-header');
        }
    });
});

рони · #2 (**permalink**) 19.01.2021, 12:27

Sergey-web92,
что не так?

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    body{
        height: 1000px;
    }

    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
$(document).ready(function() {

    let stickyNavTop = $('.header-laptop').offset().top;

    $('.page-header').height($('.page-header').height());

    $(window).scroll(function(){
        if ($(window).scrollTop() >= stickyNavTop) {
            $('.header-laptop').addClass('fixed-header');
        } else {
            $('.header-laptop').removeClass('fixed-header');
        }
    });
});

    </script>
</head>

<body>
<header class="page-header">
        <!-- top-banner -->
        <section class="top-banner is-active">
                <span class="top-banner__description">some text</span>
        </section>
        <!-- header laptop -->
        <section class="header-laptop">
                <h1>Этот блок должен быть stiky</h1>
        </section>
</header>
<main></main>


<style>
.top-banner {
    height: 50px;
    position: relative;
    background-color: gray;
}

.header-laptop {
    background-color: yellowgreen;
    height: 80px;
    width: 100%;
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

main {
    background-color: tan;
    width: 100%;
    height: 300px;
}

</style>
</body>

</html>

voraa · #3 (**permalink**) 19.01.2021, 12:46

Если забыть про осла, то можно на одном CSS

<style>
.top-banner {
  height: 50px;
  position: relative;
  background-color: gray;
}
 
.header-laptop {
  background-color: yellowgreen;
  height: 80px;
  width: 100%;
  position: sticky;
  top: 0;
}

main {
  background-color: tan;
  width: 100%;
  height: 300px;
}
</style>

<body>
<header class="page-header">
    <!-- top-banner -->
    <section class="top-banner is-active">
        <span class="top-banner__description">some text</span>
    </section>
    <!-- header laptop -->
</header>
    <section class="header-laptop">
        <h1>Этот блок должен быть stiky</h1>
    </section>
<main></main>
</body>

Sergey-web92 · #4 (**permalink**) 19.01.2021, 13:03

Прошу прощения. У меня хром перестал в тот момент видеть стили css. теперь всё работает. спасибо

Форум

Справочник

Discord чат

Курсы javascript