Создание собственного аффикса с CSS & jQuery

Автор оригинала: LAU TIAM KOK.

Affix Navigations довольно распространены в наши дни. Это просто элементы HTML, которые становятся прикрепленными (заблокированы) в определенной области на странице во время прокрутки вверх и вниз по странице. Есть плагины JavaScript, которые помогут вам сделать это, например Bootstrap Affix Plugin Отказ

Соревнование

Однако не все эти плагины подходят вам прямо из коробки. Возможно, вам понадобится болезненные настраивания, или они просто не работают вообще для вашего дизайна.

Решение

Создание собственной навигации Affix легче, чем вы думаете. Вы можете просто использовать CSS & jQuery с несколькими линиями кода, чтобы помочь вам добиться этого.

1. Создайте нормальную навигацию с помощью загрузки или основой (я предпочитаю Фонд ):

  

    
One
    
Two
    
Three
    
Four
  

1. Создать .affix Класс в ваших CSS с Должность: исправлено и установить Дисплей: Нет :

.affix {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    display: none;
}

1. Используйте jQuery для клона .navbar к .affix и установить Дисплей: Блок к .affix на Свиток мероприятие:

var target = $('.navbar')
target.after('
')

var affix = $('.affix')
affix.append(target.clone(true))

// Show affix on scroll.
var element = document.getElementById('affix')
if (element !== null) {
  var position = target.position()
  window.addEventListener('scroll', function () {
    var height = $(window).scrollTop()
    if (height > position.top) {
      target.css('visibility', 'hidden')
      affix.css('display', 'block')
    } else {
      affix.css('display', 'none')
      target.css('visibility', 'visible')
    }
  })
}

Предложения

Дайте мне знать, что вы думаете, и какие бы ваши решения были бы вашими решениями. Все предложения, пожалуйста, оставьте комментарий ниже. Надеюсь это поможет. Вы можете скачать и посмотреть, как я его использую на один Из моих проектов в Github.