Исправлена ​​ошибка, из-за которой заголовок не сохранялся после перезагрузки окна в той же позиции - PullRequest
Новая
       17

Исправлена ​​ошибка, из-за которой заголовок не сохранялся после перезагрузки окна в той же позиции

0 голосов
/ 28 августа 2018

У меня есть этот код для добавления фиксированного класса заголовка при каждой прокрутке окна. Проблема в том, что когда окно загружается для ссылок привязки, скажем, на 100 пикселей сверху, оно загружает заголовок в его первоначальном виде и добавляет фиксированный класс только после прокрутки окна. Как я могу это исправить? 

$(window).on("load resize", function () {
        var headerTop = $(".header").offset().top;
        var headerHeight = $(".header").outerHeight();
        $(window).on("scroll", function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > headerTop) {
                $('.header').addClass("fixed");
            } else {
                $('.header').removeClass("fixed");
            }
        });
    });

1 Ответ

0 голосов
/ 28 августа 2018

Вы используете $(".header").offset().top; для сравнения в if (scrollTop > headerTop) состоянии, вы должны сравнить с if (scrollTop > headerHeight)

$(".header").outerHeight(); переменная имеет фактическую высоту элемента заголовка.

Пожалуйста, проверьте ниже код: 

$(window).on("load resize", function () {
    var headerTop = $(".header").offset().top;
    var headerHeight = $(".header").outerHeight();
    $(window).on("scroll", function () {
        console.log('scroll...');
        var scrollTop = $(window).scrollTop();
        if (scrollTop > headerHeight) {
            console.log('applied fiexed');
            $('.header').addClass("fixed");
        } else {
            $('.header').removeClass("fixed");
            console.log('removed fiexed');
        }
    });
});
.header{
    border:solid 1px red;
    height:50px;
    width:501px;
    background-color:#808080;
    font-size:20px;
}

.fixed{
    position:fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="header">This is header</div>
Something line 1<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Something line 2<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Something line 3<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Something line 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Something line 5
...