Фиксация меню, когда оно доходит к верху, и отключение фиксации по завершению секции

#html #css

Подскажите как сделать, чтобы горизонтальное меню в определенной секции (в середине
лендинга), когда доходит к верху страницы стало фиксированное,(прилипало к верху),
причем все остальное содержимое проходило под ним; а после окончания секции, в котором
находится меню, отключалась фиксация и меню прокручивалось дальше...
    

Ответы

Ответ 1

поставить две "метки": в начале секции и в конце
cоздать событие на скролл, которое бы вычисляло положение страницы и включало или
отключало фиксацию.


Предлагаю такой вариант:



function stickMenu() {
  var windowTop = $(window).scrollTop();
  var sectionStarts = $('#sectionStarts').offset().top;
  var sectionEnds = $('#sectionEnds').offset().top;
  if (windowTop > sectionEnds) {
    $('.menu').removeClass('fixed');
  } else if (windowTop > sectionStarts) {
    $('.menu').addClass('fixed');
  } else {
    $('.menu').removeClass('fixed');
  }
}

$(window).scroll(function() {
  stickMenu();
});
div:not(.menu) {
  height: 300px;
}
.menu {
  background-color: lightgray;
}
.menu.fixed {
  position: fixed;
  top: 0;
}

Начало страницы

  menu item 1
  menu item 2
  menu item 3
  menu item 4
  menu item 5
  menu item 6


Начало секции
Содержимое секции

конец секции
Конец страницы


Ответ 2

html


   




css

.container {
    position: relative;
}
.menu {
    position: absolute;
    left: 0;
    top: 0;
}


js. Необходимо подключить jquery

var container = $('.container'),
    menu = $('.menu'),
    ws, as, abh, agh;
function position(){
    ws = $(window).scrollTop(); // отступ верхней границы экрана от страницы
    as = container.offset().top; // отступ контейнера, содержащего меню от страницы
    abh = container.height();
    agh = menu.height();
    if (ws > (as+(abh-agh))) {
        // ничего не делаем, чтобы меню прилипло к низу контейнера, когда прокрутим
ниже чем контейнер
    }
    else if (ws > as) {
        menu.css('top', (ws-as+50)+'px'); // тут мы в пределах контейнера, расчитываем
отступ чтобы меню прилипло к верху экрана
    }
    else {
        menu.css('top', '0px'); // если мы выше контейнера с меню - прилепить меню
к верху контейнера
    }
}

position();

$(document).on('scroll', function(){
    position();
});


Наша задача определить попадает ли верхняя граница экрана в облать container и, если
попадает то подсчитать отступ top