Bootstrap: добавить / удалить фиксированную позицию на панели навигации при прокрутке - PullRequest
0 голосов
/ 21 января 2019

Я пытаюсь прикрепить navbar к вершине, добавив положение с фиксированной вершиной к 0 при прокрутке для navbar-default, и переместить navbar обратно на ту же позицию при прокрутке вверх (вверх 300),

ниже - мой код

var height = jQuery('.navbar-default').offset().top;
$(window).scroll(function() {


var scroll = $(window).scrollTop();
    if(scroll>height) {
        $('.navbar-default').css({position: 'fixed', top: '0px',left:'0px',right:'0px','z-index':'9999999999999999'});
        } else if(scroll<height){ 
// below i want to right code to position navbar to its original position   
      $('.navbar-default').css({position: 'relative', top: height,left:'0px',right:'0px','z-index':'9999999999999999'});
        }   

});

Я не уверен, если, если код детали написан правильно, так как navbar не работает, если я прокручиваю вверх, пожалуйста, посоветуйте, как мне это исправить. Спасибо

Редактировать: я пыталсядобавьте navbar-fixed-top при прокрутке, а затем удалите его, но по какой-то причине он добавляет эффект мерцания на всю страницу, поэтому вместо этого я использую позиционирование

1 Ответ

0 голосов
/ 21 января 2019

если под "мерцанием" вы подразумеваете, что элементы ниже панели навигации подпрыгивают вверх, чтобы заполнить пробел, решение состоит в том, чтобы поместить панель навигации внутри элемента фиксированной высоты (высоты панели навигации), например <div>.причина в том, что когда вы исправляете навигационную панель, она удаляется из потока страницы, а другие элементы перемещаются вверх, чтобы заполнить пробел.именно поэтому требуется родитель с фиксированной высотой.таким образом, вы можете использовать .navbar-fixed-top.
. Проблема, которую я вижу в вашем коде, состоит в том, что когда вы устанавливаете позицию обратно относительно, вы устанавливаете вершину на высоту.Относительно расположенные элементы располагаются относительно их положения на странице, а не на документе или в окне просмотра, поэтому вам нужно установить его на 0.
также вам не нужно ставить это if после else.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...