Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.01.2021, 11:15
Интересующийся
Отправить личное сообщение для Sergey-web92 Посмотреть профиль Найти все сообщения от Sergey-web92
 
Регистрация: 02.10.2020
Сообщений: 20

Как сделать работающий прилепающий sticky-header?
Здравствуйте. Помогите пожалуйста разобраться.
Мне нужно чтобы блок с классом ".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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #3 (permalink)  
Старый 19.01.2021, 12:46
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Если забыть про осла, то можно на одном 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>
Ответить с цитированием
  #4 (permalink)  
Старый 19.01.2021, 13:03
Интересующийся
Отправить личное сообщение для Sergey-web92 Посмотреть профиль Найти все сообщения от Sergey-web92
 
Регистрация: 02.10.2020
Сообщений: 20

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать сделать смену картинки по щелчку мыши? PavelGR Javascript под браузер 0 09.08.2020 09:28
как сделать проверку на display: block; ufaclub jQuery 3 22.12.2013 19:21
Как сделать калькулятор и с чего начать? A.P. Yellowman Общие вопросы Javascript 3 15.11.2013 21:32
Как сделать реакцию на изменение любого элемента формы. Mik Events/DOM/Window 3 28.07.2011 08:52
Как убрать hover? Либо как сделать стрелки статичными? krusty36 Элементы интерфейса 1 13.07.2011 09:20